带滚动条的 100% div 高度答案

【问题标题】：Div height 100% with scroll bar带滚动条的 100% div 高度
【发布时间】：2014-07-02 20:24:44
【问题描述】：

我正在寻找一种 css 方式来让 this 布局运动 100% 高度 div，这意味着白色将拖到文档底部而不是窗口。我想在没有图像和 javascript 的情况下执行此操作。

我试过html,body{height:100%}，它只适用于窗口而不是文档。我也试过放一个 900px 的身体背景图片，它没有以容器 div 为中心。

【问题讨论】：

我认为您可以在包含该白色部分的任何元素上使用 overflow:visible 来实现此目的。

标签： html css

【解决方案1】：

查看实时站点，因为 URL 在您的图像中很方便地可见..

添加这个 CSS：

html, body {
    height: 100%
}
#container {
    min-height: 100%
}

【讨论】：

最简单的想法通常是最好的想法:)

【解决方案2】：

你需要类似的东西

<html>

<body style="height: 100%; overflow: hidden">

<div id="realbody" style="height: 100%: overflow: auto">
    ... page goes here ...
</div>

</body>

</html>

这样，您可以禁用实际页面主体上的滚动条，并且所有滚动标签都将“内部”放置在“真实主体”div 上的文档中。在#realbody 上使用合适的样式，您可以根据需要拉伸背景。

【讨论】：

【解决方案3】：

您实际上可以通过使用带有 clear: both; 的特殊分隔符 div 来强制包含 div 继续在其他 div 后面。设置在他们身上。像这样：

<div id="wrapper">

    <div id="left">
        Left
    </div>

    <div id="right">
        Right
    </div>

    <div style="clear:both;"></div>

    <div id="footer">
        Footer
    </div>

    <div style="clear:both;"></div>

</div>

使用您希望包装器继续下降的任何位置。

注意：我不确定 W3c 说这是好还是坏的做法，可能不好，但它有效。

【讨论】：

【解决方案4】：

粘性页脚应该完成此操作：http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

【讨论】：

【解决方案5】：

这个问题有点老了，
但是，如果你不想改变 body 和 html，
并且需要一个没有滚动条的 100% 高度的元素，你可以在 div 上使用它：

#fullHeightDiv{
    position: absolute;
    height: 100%;
    bottom: 0;
}

希望这可以帮助某人。

【讨论】：