CSS высота 100% его родителя

0

У меня есть эта страница: http://www.nyccriminallawyer.com/felonymisdemeanor/, что я хочу сделать, это сделать левый внутренний ящик (белый с Felony/Misdemeanor в качестве названия под названием.in_left), чтобы он составлял 100% родительский (называемый.inner)

коды здесь:

.in_left {
float: left;
width: 721px;
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 24px;
background-color: white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 11px -4px #000;
}

.inner {
background: #CCD7CC;
margin-top: 1px;
color: #5A5A5A;
padding: 10px;
clear: both;
overflow: hidden;
}

Я пробовал высоту: 100% и минимальную высоту, но это не работает.

  • 1
    Высота в процентах работает только в том случае, если родительский элемент сам имеет явный набор высоты - в противном случае механизм визуализации может оказаться в ситуациях, когда высота родительского элемента зависит от дочернего элемента и наоборот одновременно, и это будет неразрешимо.
  • 0
    Просто с помощью CSS это довольно сложно достичь в вашем дизайне ...
Показать ещё 1 комментарий
Теги:

3 ответа

2
Лучший ответ

Не используйте float на .in_left и .in_right, используйте display:table-cell; на тех и, самое главное, использовать display:table; на их контейнере:

.inner {  
    display: table;  
}  
.in_left {
    width: 229px;
    /* other style */
    display: table-cell;  
}  
.in_left {
    width: 721px;
    /* other style */
    display: table-cell;  
}
Поделиться
  • 1
    +1 Я собирался ответить на то же самое, см. Fiddle : jsfiddle.net/4n5aG - поддержка браузера тоже хорошая, т.е. 8 +
  • 0
    блестящий! Я никогда не слышал об этой технике раньше, спасибо за новую информацию :)
1

Установка высоты элемента 100% работает только в том случае, если высота родительских элементов каким-то образом фиксирована (например, высота: 300 пикселей). Но вы можете установить дочерний элемент абсолютно позиционированным (его непосредственному родителю) и установить его положение в четырех направлениях:

.in_left {
  ...
  position: relative;
}

.inner {
  ...
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Демо здесь: http://jsbin.com/OkIQUCi/1/

Поделиться
  • 0
    Ваш ответ гласит: «установить дочерний элемент абсолютно позиционированным», но код говорит position: relative; ? В любом случае, я не думаю, что вы бы правильно работали с динамическим контентом. Хотите поделиться демо?
  • 0
    Извините за опечатку. Демо прилагается.
1

Вы не можете продлить ребенка на 100% от высоты своего родителя, но вы можете заставить его выглядеть так, как будто он расширяется с использованием техники искусственных колонок.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню