Question

Hie Everyone

我正在设计一个流畅布局的网页。我希望保持100％的宽度和100％的高度。问题是我不知道如何在他们的父div“包装器”内保持100％高度的div“left”和“right”。

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

Answer 1

如果我理解正确，你想在你的包装div中左右浮动div，但是在屏幕中保留包装div的全高？

如果是这样，左右div当然会进入包装器内部，你使用{... float：left; position：relative;}和{... float：right; position：relative;}将它们浮动到两侧。

现在，因为你已经浮动了这两个div，它们是你的包装器内容的一部分，包装器本身可能没有高度。这是因为里面的两个div“漂浮出来”。为了给你的包装器提供与内部两个div相同的高度，你可以使用：

将此作为第三个div包含在您的包装器中：<div style="clear: both;"></div> OR
在你的包装器中放入两个div之后的任何元素（如span）并给它一个CSS属性{... clear：both;}

现在你已经“清除了漂浮物”，你的包裹物里面有两个div的全高。

如果在另一只手上，你希望所有的内容都延伸到屏幕的整个高度，而不考虑你放在那里的东西，你需要做一些CSS魔术而且它太复杂了解释没有看到你的代码。从这里开始：http://ryanfait.com/sticky-footer/

希望有所帮助。

Answer 2

如果您将同一级别的所有元素设置为100％宽度和高度，则浏览器之间会出现意外行为。通过您给出的示例，您尝试在父级内提供header和wrapper所有空间。

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

这怎么可能真的可能？有几种方法可以做到这一点：

第一个元素获取所有空格或
两者都必须重叠，或
他们都共享空间

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

顺便问一下，你试过float你的元素吗？

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

Answer 3

要拥有浏览器高度为100％的div，父级也必须具有100％的高度。尝试添加以下css：

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

Answer 4

尝试添加

最小高度：100％;你的css，chk out this示例

100％div高度

4 个答案: