100％的高度不工作？ [英] 100% height doesn't work?
问题描述
+----------------------+
| 1 |
| |
+----------------------+
| | |
| 2 | |
| | |
| | 4 |
+-------| |
| 3 | |
| | |
+----------------------+
如上所示（1）我需要添加一些标题内容，（2）左导航，（3）一些内容在2到3的中心，但不知道的高度，因为4， 4）内容较大。因此，我需要指定 height：100％; ，但不起作用。怎么做？
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?
编辑
<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我想使用background（2）& ）不同。
main css i want to use background (2)&(3) same, background of (4) different.
#left-nav{width: 200px; background-color: red; height: 100%;}
chek此链接 红色文本带有红色边框是我想给予高度：100％;
推荐答案
很高兴看到查询：
演示： JSFiddle
如果您有动态内容，但不知道自己的网页be，你不应该设置 height 属性，因为高度将设置它相对于父（或窗口）的高度。再次，我们想要的大小是动态的！所以不要设置height属性。
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:
如何使动态区域具有相同的高度？
简单来说，你不能。
这是一个纯CSS实现，可能不会在< ; IE8。我将展开 @ Adam的回答。
This is a pure CSS implementation that will probably not look quite right in < IE8. I'll expand off of @Adam's answer.
-
将侧边栏元素包裹在新div（
#sidebar）中，然后再次float：
left
Wrap the sidebar elements in a new div (
#sidebar) and again,float: left.
设置 #wrap {overflow：auto} 如果它变得高于＃，则允许。 （来源） #wrap 展开以包含 #sidebar main
Set #wrap { overflow: auto }, this will allow #wrap to expand to contain #sidebar in the event that it becomes taller than #main. (Source)
设置 #sidebar {width：X} 和 #main {padding-right：X} 。这将使得 #main 尊重在左边的区域将由 #sidebar 的背景
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.
最后一部分是设置 #sidebar 和 #main 。我们会通过设置两个背景图片来执行此操作： #wrap {background：url（'image1'）repeat-y，，其中X是边栏的宽度。确保图像与侧边栏的宽度相同，并且只在y方向重复。第二个图像将偏移到侧边栏的右侧，并且平铺以填充
url（'image2'）X 0} #wrap 的背景的其余部分。
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.
由于 #sidebar 和 #main 设置高度，他们可以随着内容的增长自由扩展。我们固定 #wrap 以展开到浮动的 #sidebar 的高度，通常会展开以覆盖高度 #main ，因为它只是一个正常的块元素。由于背景设置为 #wrap ，因此我们给予外观这两个子项的高度与父项相同。
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 （添加 #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 的高度c $ c> #sidebar 是更高，而不是 #main 。 b
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;
}
这篇关于100％的高度不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
