100% высота не работает?

Question

+----------------------+ 
|   1   | 
|      | 
+----------------------+ 
|  |    | 
| 2 |    | 
|  |    | 
|  |  4  | 
+-------|    | 
| 3 |    | 
|  |    | 
+----------------------+ 

Как показано выше (1) Мне нужно добавить содержимое заголовка, (2) левую навигацию, (3) некоторое содержимое в пределах от 2 до центра 3, но не знаю высоты из-за 4, (4) более крупное содержимое. Следовательно, мне нужно указать height: 100%;, но не работает. Как сделать?

Редактировать

<div id="wrap"> 
<!--contents of (1)--> 
</div> 
<div id="wrap"> 
<div id="left-nav"> 
<!--contents of (2)--> 
<div id="someid"> 
<!-contents of (3)--> 
</div> 
</div> 
<div id="main"> 
<!--contents of (4)--> 
</div> 
</div> 

Основной CSS я хочу использовать фона (2) & (3) то же, фон (4) разные.

#left-nav{width: 200px; background-color: red; height: 100%;} 

chek this link красный текст с красной каймой что я хочу дать height: 100%;

Answer 1

Приятно видеть question в полном комплекте :)

Демо: JSFiddle

Если у вас есть динамическое содержание, и вы не знаете, как высокая ваша страница будет, вы не должны установить свойство height, так как высота будет устанавливать его относительно высоты родительского (или окна). Опять же, мы хотим, чтобы размер был динамичным! Поэтому не устанавливайте свойство height.

Я думаю, что вопрос можно перефразировать на:

Q: Как вы можете сделать динамические зоны одинаковой высоты с только CSS?

Проще говоря, вы не можете. Но вы можете сделать их быть одинаковой высоты.

Это чистая реализация CSS, которая, вероятно, будет не совсем корректной в < IE8. Я развернусь от @Adam's answer.

1. Оберните элементы боковой панели в новом DIV (#sidebar) и снова, float: left.

2. Set #wrap { overflow: auto }, это позволит #wrap расширить содержать #sidebar в том случае, если она становится выше, чем #main. (Source)

3. #sidebar { width: X } и #main { padding-right: X }. Это сделает так, что #main уважаем область слева, которая будет рассмотрена на фоне #sidebar.

4. Заключительная часть - это фон для #sidebar и #main. Мы сделаем это, установив два фоновых изображения: #wrap { background: url('image1') repeat-y, url('image2') X 0 }, где X - ширина боковой панели. Убедитесь, что изображение имеет ту же ширину, что и боковая панель, и повторяйте ее только в направлении y. Второе изображение будет смещено вправо от боковой панели и выложено плиткой, чтобы заполнить остальную часть фона #wrap.

Поскольку ни #sidebar ни #main есть набор высоты они могут свободно расширяться, поскольку их содержание растет. Мы установили #wrap, чтобы развернуть до высоты плавающего #sidebar, и он будет обычно расширяться, чтобы покрыть высоту #main, поскольку это обычный элемент блока. Поскольку фоны установлены на #wrap, мы получаем внешний вид, что оба ребенка имеют ту же высоту, что и родительский.

HTML(Добавлено #sidebar)

<div id="header">1</div> 
<div id="wrap"> 
    <div id="sidebar"> 
     <div id="left-nav">2</div> 
     <div id="someid">3</div> 
    </div> 
    <div id="content">4</div> 
</div> 

CSS

ПРИМЕЧАНИЕ: Несколько изображений не будут работать < IE8. Вы можете установить цвет до #main, но он не будет расширяться до высоты #wrap, если #sidebar is taller than #main.

#wrap { 
    background: url('image1') repeat-y, 
       url('image2') X 0; 
    overflow: auto; 
} 
#sidebar { 
    float: left; 
    width: X; 
} 

#main { 
    margin-left: X; 
} 

Answer 2

При установке что-то на 100%, это 100% от родительского элемента. Итак, какова высота родительского элемента? Если это не установлено для какого-то значения, вы можете не получить то, что ожидаете. Если родительский элемент установлен на 100%, спросите себя: «100% того, что такое родительский набор?» Процент не даст вам размер, пока вы не достигнете значения, которое может быть только видовым окном и размером элемента html.

Answer 3

я решил мою проблему таким образом ..... рекомендуется

#left-nav{position: absolute; width: 329px; height: 100%;} 
#someid{height: 70%; bottom: 0;} 

Но все-таки правильное решение.

Answer 4

Вам необходимо либо использовать equalizeCols (плагин для JQuery), чтобы оба столбцов одинаковой высоты

-или-

имитировать внешний вид левой панели, обернув 3 и 4 в контейнере DIV и давая фоновое изображение с другим цветом/рисунком на левой стороне, которое может повторять-y для всей высоты содержимого. Имеют смысл?