100％div高度
大家好100％div高度
我在设计一个流体布局的网页。我想保持100％的宽度和100％的高度。 问题是我不知道如何保持在他们的父div，“包装”100％身高的div“左”和“右”。
<div id="container" style="width:100%; height:100%">
<div id="header" style="width:100%; height:100px">
</div>
<div id="wrapper" style="width:100%; height:(100% - 100px)">
<div id="left" style="width:250px; height:(100% - 100px)">
</div>
<div id="right" style="width:(100% - 250px); height:(100% - 100px)">
</div>
</div>
</div>
请帮忙。
从doctype.com回答
CSS
html, body{
height: 100%;
margin: 0;
padding: 0;
}
HTML
<body>
<div id="container" style="width:100%; height:100%; position: absolute;">
<div id="header" style="width:100%; height:100px;">
header
</div>
<div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
<div id="left" style="width:250px; height:100%; float:left;">
left
</div>
<div id="right" style="width: 250px; height:100%; float:right; ">
right
</div>
main content
</div>
</div>
</body>
如果我理解正确的话，你要浮动div的右侧和左侧的包装DIV中，但保留包装div的全高度屏幕？
如果是这样，右边和左边div当然会进入包装，并使用{... float：left; position：relative;}和{... float：right; position：relative;}将它们浮动到两边。
现在，因为您已经将这两个div包含在您的包装div的内容中，所以包装本身的高度可能为零。这是因为里面的两个div“浮出来”。为了让您的包装相同高度的两个div里面有，你可以：
- 将这个作为你的包装内第三格：
<div style="clear: both;"></div>或 - 把任何元素的包装里面的两个div后（像一个跨度），并给它一个CSS属性{... clear：both;}
现在你已经“清除浮动”，你的包装有两个div的全部高度。
如果使用其他手势，您希望您的所有内容都可以伸展到屏幕的整个高度，而不必考虑您在屏幕上放置的内容，那么您需要做一些CSS魔术，它会变得太复杂没有看到你的代码解释。从这里开始：http://ryanfait.com/sticky-footer/
希望有所帮助。
要有100％浏览器高度的div，父级也需要100％的高度。尝试添加下面的CSS：
html, body { height: 100%; margin: 0; padding: 0; }
我已经得到了该代码。我的主div（“容器”）没问题，它有100％的高度。我的标题有100px的高度 - 我希望div“包装器”及其子项（“左”和“右”）适合剩余的屏幕视图。 – 2010-01-25 08:31:51
如果您在同级别的所有元素是100％的宽度和高度，你会得到浏览器之间的意外行为。通过你给出的例子，你试图给父母的所有空间header和wrapper。
100% container
+----------------------------+
| 100% header 100% wrapper |
| +----------+ +-----------+ |
| | errr...? | |
| +----------+ +-----------+ |
+----------------------------+
这应该是怎么回事？有这样做的几种方法之一：
- 第一要素得到所有的空间，或者
- 都有重叠或
- 它们共用空间
所以你需要在给出百分比时更具体。
顺便问一下你有没有试过float ing你的元素？
position: relative; // or absolute
float: left;
我已经编辑了一些逻辑来达到我想达到的目的。 – 2010-01-25 08:36:24
如果您在联属网站doctype.com上提问，您可能会有更好的回答机会 – Spoike 2010-01-25 08:21:45