100％的高度不起作用？(100% height doesn't work?)

100％的高度不起作用？(100% height doesn't work?) +----------------------+ | 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%;}

谢谢这个链接带红色边框的红色文字是我要给出的height: 100%;

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

As shown above (1) I need to add some header contents, (2) left navigation, (3) some content within 2 to center of 3 but don't know the height because of 4, (4) larger contents . Hence, I need to specify height: 100%; but doesn't work. How to do?

Edit

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

main css i want to use background (2)&(3) same, background of (4) different.

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

chek this link the red text with red border is what i want to give the height: 100%;

最满意答案

很高兴看到整个问题 :)

演示： JSFiddle

如果您有动态内容并且您不知道页面的height ，则不应设置height属性，因为高度将相对于父（或窗口）的高度设置它。 同样，我们希望大小是动态的！ 所以不要设置height属性。

我认为这个问题可以改为：

问：如何只用CSS制作相同高度的动态区域？

简单地说，你做不到 。 但是，你可以使它们看起来高度相同。

这是一个纯粹的CSS实现，在<IE8中可能看起来不太正确。 我将扩展@ Adam的答案 。

将侧边栏元素换入新的div（ #sidebar ）并再次float: left 。

设置#wrap { overflow: auto } ，这将允许#wrap扩展为包含#sidebar ，如果它变得比#main高。 （资源）

设置#sidebar { width: X }和#main { padding-right: X } 。 这将使得#main尊重左边的区域将被#sidebar的背景所占据。

最后一部分是为#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 ，但如果#sidebar 高于 #main ，它将不会扩展到#wrap的高度。

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

It's nice to see the question in it's entirety :)

Demo: JSFiddle

When you have dynamic content and you don't know how tall your page is going to be, you should not set the height property since the height will set it relative to either the parent (or window)'s height. Again, we want the size to be dynamic! So don't set the height property.

I think the question could be rephrased to:

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

To put it simply, you can't. But, you can make them appear to be the same height.

This is a pure CSS implementation that will probably not look quite right in < IE8. I'll expand off of @Adam's answer.

Wrap the sidebar elements in a new div (#sidebar) and again, float: left.

Set #wrap { overflow: auto }, this will allow #wrap to expand to contain #sidebar in the event that it becomes taller than #main. (Source)

Set #sidebar { width: X } and #main { padding-right: X }. This will make it so #main respect's the area on the left that will be taken up by the #sidebar's background.

The final part is setting up the background for #sidebar and #main. We'll do this by setting two background images: #wrap { background: url('image1') repeat-y, url('image2') X 0 }, where X is the width of the sidebar. Make sure the image is the same width as the sidebar and only repeat it in the y-direction. The 2nd image will be offset to the right of the sidebar and tiled to fill the rest of #wrap's background.

Since neither #sidebar nor #main have a set height they are free to expand as their content grows. We fixed #wrap to expand to the height of the floated #sidebar, and it will normally expand to cover the height of #main since it is just a normal block element. Because the backgrounds are set to #wrap, we give the appearance that both children are the same height as the parent.

HTML (Added #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

NOTE: Multiple images will not work < IE8. You can still set a color to #main, but it will not expand to the height of #wrap if #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; }