100% 格高度答案

【问题标题】：100% div height100% 格高度
【发布时间】：2010-01-25 18:18:24
【问题描述】：

大家好

我正在设计一个布局流畅的网页。我想保持 100% 的宽度和 100% 的高度。问题是我不知道如何让 div “左”和“右”在其父 div 内保持 100% 的高度，“包装器”。

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

【问题讨论】：

如果您在附属网站 doctype.com 中提出此问题，您可能会有更好的回答机会

标签： html css

【解决方案1】：

如果我的理解正确，您想在包装器 div 内左右浮动 div，但在屏幕上保留包装器 div 的全高？

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

现在，因为您已浮动这两个 div，它们是包装器 div 内容的一部分，所以包装器本身的高度可能为零。这是因为里面的两个 div “浮出水面”。要使您的包装器与内部的两个 div 具有相同的高度，您可以：

将其作为第三个 div 放入包装器中：<div style="clear: both;"></div> 或
将任何元素放入包装器中的两个 div 之后（如跨度），并为其赋予 {... clear: both;}

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

另一方面，如果您希望所有内容始终伸展到屏幕的整个高度，而不考虑您在其中放置的内容，您将需要做一些 CSS 魔术，这太复杂了在没有看到您的代码的情况下进行解释。从这里开始：http://ryanfait.com/sticky-footer/

希望对您有所帮助。

【讨论】：

@Lucius：不客气……已经用了很长时间了，从来没有遇到过问题。

【解决方案2】：

如果您将同一级别中的所有元素设置为 100% 的宽度和高度，您将在浏览器之间获得意想不到的行为。在你给出的例子中，你试图给 header 和 wrapper 父级中的所有空间。

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

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

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

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

顺便问一下，您是否尝试过floating 您的元素？

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

【讨论】：

我已经编辑了一些我想要实现的逻辑。

【解决方案3】：

要让 div 具有 100% 的浏览器高度，父级也需要具有 100% 的高度。尝试添加以下 css：

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

【讨论】：

我已经有了那个代码。我的主 div("container") 没问题，它有 100% 的高度。我的标题高度为 100 像素 - 我希望 div“wrapper”及其子项（“left”和“right”）适合剩余的屏幕视图。

【解决方案4】：

尝试添加

最小高度：100%；到你的css，检查出this例子

【讨论】：

min-height 并非所有浏览器都支持
好吧，我给他举了个例子..他可以看到那里的一切如何实现他的目标，他会导致身高..他会得到相同的结果
@poke: IE6 是否仍然被认为是相关的，除非另有说明？
为母 div 获得 100% 的高度不是问题。问题是让左右 div 适合标题 div 下方的剩余屏幕视图。查看yell.com/maps/MapAction.do 并查看左侧在内容更改时的表现。
好吧，如果你不能完成它，你可以随时使用 javascript，获取窗口高度并设置左侧像素值。