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我想使用background（2）＆amp;（3）相同，背景为（4）不同。

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

chek this link 带有红色边框的红色文字是我想要的height: 100%;

Answer 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}}

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插件）来使两列的高度相同

-OR -

通过将3和4包装在容器div中并在左侧给出具有不同颜色/图案的背景图像来模拟左侧条的外观，该背景图像可以对内容的整个高度重复y。有意义吗？

100％的高度不起作用？

4 个答案: