CSS 将 div 拉伸 100% 的高度超出了站点容器和浏览器窗口答案

【问题标题】：CSS stretching div 100% in height goes beyond site container & browser-windowCSS 将 div 拉伸 100% 的高度超出了站点容器和浏览器窗口
【发布时间】：2010-11-27 11:44:21
【问题描述】：

我正在尝试制作一个 100% 高度的布局，底部有一个页脚。我有一个站点包装器，其中有两个内容 div。在第二个内容 div 的底部有一个页脚。问题是顶级内容 div 似乎将第二个内容 div 推到了网站包装之外。

这是我正在试验的代码：

 <style type="text/css">
html, body { height:100%;}

#sitecontainer { 
    height:100%;
    border: medium #000 solid;
}
#contentcontainerone{
    border: medium #F00 solid;
}
#contentcontainertwo{
    height:100%;
    border: medium #00F solid;
    position:relative;
}
#footer{
    position:absolute;
    bottom:0;
    width:100%;
    text-align:center;
}
</style>
</head>

<body>
<div id="sitecontainer">
    <div id="contentcontainerone">
    Some content <br />
    Some content <br />
    Some content <br />
    Some content <br />
    Some content <br />
    </div>
    <div id="contentcontainertwo">
        <div id="footer">Footer</div>
    </div>
</div>
</body>

这是页面的链接：http://www.smsidat.com/test/index.html

我基本上想要实现的是，网站应该始终保持 100% 的高度，因此可以拉伸到浏览器窗口的底部，或者如果它的高度更高，并且底部有页脚，则内容结束的地方。因此，理想情况下，带有蓝色边框的 div 应该保留在具有黑色边框的包装器内，并且不会超出浏览器窗口的底部或内容的末尾（如果它更大的话）。

如果有解决此问题的任何想法，将不胜感激。

【问题讨论】：

标签： css html

【解决方案1】：

解决办法：

html, body
{
  height: 100%;
  overflow: hidden;
}

#sitecontainer
{
  height: 100%;
  position: relative;
}

#footer /*OUTSIDE THE CONTAINER */
{
  bottom: 0;
  position: absolute;
  height: 50px; /*change this*/
}

【讨论】：

谢谢 - 这段代码的问题是容器二中的任何内容都会因为溢出而被截断：隐藏
将溢出：隐藏更改为溢出：自动，它将有一个滚动条。如果这不是您想要的，那么也许 100% 的高度不是您所追求的，但您应该让它流出视口吗？ :)
这个答案隐藏了超出浏览器的 div 部分。 OP 和大多数其他人希望 100% 的高度占据浏览器的边界，而不是超出浏览器视口。有解决办法吗？

【解决方案2】：

确实不建议在布局中使用<table> 标签。如上所述，CSS3 有很多方法可以解决这个问题（容器及其父级一直使用 100% 高度到 html 标记）。但是，在某些情况下（参考：Eric Meyer，Smashing CSS book），当 CSS display: table-cell 样式属性可能适用于布局时......至少它将布局控件放回 CSS 中而不是内容作为最佳-练习。

【讨论】：

【解决方案3】：

试图在另一个 div 的底部对齐一个 DIV 可能会很棘手。有一些骇人听闻的方法可以做到这一点，但我建议只使用表格。

<table>
    <tr>
        <td><div id="header"></div></td>
    </tr>
    <tr>
        <td><div id="content"></div></td>
    </tr>
    <tr>
        <td><div id="footer"></div></td>
    </tr>
</table>

然后使用 CSS 定义每个 DIV 的高度，内容 DIV 会随着页面一起拉伸，直到发生溢出，而页眉和页脚 DIV 保持原始高度。

【讨论】：

使用表格来解决这个问题本身就是一个 hack。
我并不是建议使用表格来“解决”这个问题。我建议它作为一种替代方法。问题是尝试将 DIV 高度设置为相对可能会很棘手，因为没有静态高度。每个浏览器都以不同的方式处理这些设置。此外，他有 2 个内容 DIV，更复杂的是，如果这些内容 DIV 中的 1 个包含他想一直拉伸的另一个 DIV，该怎么办？没有简单的方法可以通过 CSS 使用 DIV 定位和相对高度分配。
SMSidat 询问他如何才能实现静态页眉、页脚和内容 DIV 的目标，这些 DIV 会随着页面的扩展而增长/缩小。使用表格是一种简化的方法。坦率地说，当它实际上只是一种替代方案（出于上述原因）时，将我的答案记下来并称之为“黑客”，这会驳回最初对 DIV 纯粹主义者 pov 的要求......
停止使用表格进行布局。
表格可能被滥用（即过度嵌套导致维护问题和更大的文件大小、内容和设计分离不佳等）。但是，我认为将表格布局与糟糕的设计（即“表格地狱”）自动关联还为时过早。相反，即使是 DIV 布局也可能实施不当和滥用，从而导致“DIV 地狱”。 DIV 不是布局的金锤……我发现人们继续将某些事情记为总是好的或总是坏的，这令人失望。