Question

我正在寻找一种以this布局运动100％高度div的css方式，这意味着白色将落到文档的底部而不是窗口。我想这样做没有图像，没有javascript。

我尝试html,body{height:100%}只应用于窗口而不是doc。我还试图放置一个900px的身体背景图像，它不是以容器div为中心。

enter image description here

Answer 1

查看实际网站，因为网址在图片中方便可见..

添加此CSS：

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

Answer 2

你需要像

这样的东西

<html>

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

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

</body>

</html>

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

Answer 3

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

<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是否说这是好的或坏的做法，可能不好，但它有效。

Answer 4

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

Answer 5

问题有点旧，但是，如果你不想改变body和html，你需要一个100％高度的元素而不用滚动条你可以在div上使用它：

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

希望这可以帮助某人。

使用滚动条划分高度100％

5 个答案: