html - 100% 高度不起作用？

Question

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

如上图(1)我需要添加一些header内容，(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 属性，因为高度将相对于父级(或窗口)的高度。同样，我们希望尺寸是动态的!所以不要设置高度属性。

我认为这个问题可以改写为:

Q: How can you make dynamic areas the same height with only CSS?

简而言之，您不能。但是，您可以使它们看起来具有相同的高度。

这是一个纯 CSS 实现，在 < IE8 中可能看起来不太正确。我将扩展 @Adam's answer .

1. 将侧边栏元素包裹在一个新的 div (#sidebar) 中，然后 float:
左边。

2. 设置#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 扩展到 float 的 #sidebar 的高度，它通常会扩展到覆盖 #main 的高度，因为它只是一个普通的 block 元素。因为背景设置为 #wrap，所以我们给外观两个 child 都和 parent 一样高。

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，但如果 #sidebar 更高，它不会扩展到 #wrap 的高度 比 #main。

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

#main {
    margin-left: X;
}