+----------------------+
| 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我想使用background（2）＆amp;（3）相同，背景为（4）不同。
#left-nav{width: 200px; background-color: red; height: 100%;}
chek this link 带有红色边框的红色文字是我想要的height: 100%;
答案 0 :(得分：1)
很高兴看到整个question：）
演示：JSFiddle
如果您有动态内容并且您不知道页面的高度，则不应设置height属性，因为高度将相对于父级（或窗口）设置它高度。同样，我们希望大小是动态的！所以不要设置height属性。
我认为这个问题可以改为：
问：如何使用仅CSS 使动态区域具有相同的高度？
简单地说，你不能。但是，你可以使它们出现达到相同的高度。
这是一个纯粹的CSS实现，在＆lt;中可能看起来不太正确。 IE8。我将展开@Adam's answer。
将侧边栏元素换入新div（#sidebar）并再次float:
left。
设置#wrap { overflow: auto }，如果#wrap变得高于#sidebar，这将允许#main展开以包含#sidebar { width: X }。 (Source)
设置#main { padding-right: X }和#main。这将使#sidebar尊重左侧的区域，#sidebar的背景将占据该区域。
最后一部分是设置#main和#wrap { background: url('image1') repeat-y,
url('image2') X 0 }的背景。我们将通过设置两个背景图片来完成此操作：#wrap，其中X是侧边栏的宽度。确保图像的宽度与侧边栏的宽度相同，并且只在y方向上重复。第二张图片将偏移到侧边栏的右侧，并平铺以填充#sidebar背景的其余部分。
由于#main和#wrap都没有设定的高度，因此随着内容的增长，它们可以自由扩展。我们修复了#sidebar以扩展到浮动#main的高度，它通常会展开以覆盖#wrap的高度，因为它只是一个普通的块元素。由于背景设置为#sidebar，因此我们提供外观，表明两个孩子的父亲身高都与父母一样。
HTML （已添加<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>
）
#main<强> CSS
注意：多个图像不起作用＆lt; IE8。您仍然可以将颜色设置为#wrap，但如果#sidebar 更高而不是#main，则不会扩展到#wrap {
background: url('image1') repeat-y,
url('image2') X 0;
overflow: auto;
}
#sidebar {
float: left;
width: X;
}
#main {
margin-left: X;
}
的高度。< / em>的
{{1}}
答案 1 :(得分：0)
当你将东西设置为100％时，它是父元素的100％。那么父元素的高度是多少？如果没有设置某个值，那么你可能得不到你所期望的。如果父母设置为100％，请问自己，“100％的内容是什么？父母设置为什么？”在获得可能只是视口和html元素大小的值之前，百分比不会给你一个大小。
答案 2 :(得分：0)
我这样解决了我的问题......
#left-nav{position: absolute; width: 329px; height: 100%;}
#someid{height: 70%; bottom: 0;}
但仍建议采用适当的解决方案。
答案 3 :(得分：0)
你需要使用equalizeCols（一个jQuery插件）来使两列的高度相同
-OR -
通过将3和4包装在容器div中并在左侧给出具有不同颜色/图案的背景图像来模拟左侧条的外观，该背景图像可以对内容的整个高度重复y。有意义吗？