100% div高度

如果我理解正确,您希望在包装分区中左右浮动分隔符,但在屏幕中保留包装分区的完整高度?

如果是这样的话,那么左右两个分区就进入包装器,然后使用……浮动:左;位置:相对;和…浮动:右;位置:相对;浮动到侧面。

现在,因为您已经浮动了这两个div,它们是wrapper div内容的一部分,所以wrapper本身的高度可能为零。这是因为里面的两个潜水器“浮起来”。要使您的包装与内两个沙发床的高度相同,您可以:

• 将此作为第三个分区放入包装器中: <div style="clear: both;"></div> 或
• 将任何元素放在包装器的两个div之后(比如一个跨度),并给它一个的css属性。清除:两个;

现在,您已经“清除了浮点数”,并且您的包装器具有内部两个div的完整高度。

另一方面,如果你希望所有的内容都能延伸到屏幕的整个高度,而不管你在屏幕上放了什么,你需要做一些CSS魔术,它会变得过于复杂,无法解释而看不到你的代码。从这里开始: http://ryanfait.com/sticky-footer/

希望有帮助。

如果将同一级别中的所有元素的宽度和高度设置为100%,则浏览器之间会出现意外行为。以你所举的例子来说 header 和 wrapper 父级中的所有空间。

100% container
+----------------------------+
| 100% header  100% wrapper  |
| +----------+ +-----------+ |
| |         errr...?       | |
| +----------+ +-----------+ |
+----------------------------+

这真的是怎么可能的?有几种方法可以做到这一点:

• 第一个元素得到所有空间,或者,
• 两者必须重叠,或者,
• 他们都共享空间

所以在给出百分比时,你需要更具体一些。

顺便问一下,你试过了吗 float 你的元素?

position: relative; // or absolute
float: left;

要使DIV具有浏览器100%的高度,父级也需要具有100%的高度。尝试添加以下CSS:

html, body { height: 100%; margin: 0; padding: 0; }

尝试添加

最小高度:100%;对于您的CSS,chk out this 例子