Html 带滚动条的分区高度100%_Html_Css

Html 带滚动条的分区高度100%

html css

Html 带滚动条的分区高度100%,html,css,Html,Css,我正在寻找一个css的方式，以有一个100%的高度div的布局运动，这意味着白色将跟踪到文件的底部，而不是窗口。我想在没有图像和javascript的情况下完成这项工作我尝试了html，body{height:100%}，它只应用于窗口而不是文档。我还试着放置一个900px的主体背景图像，但它没有以container div为中心你需要像 <html> <body style="height: 100%; overflow: hidden"> <div i

我正在寻找一个css的方式，以有一个100%的高度div的布局运动，这意味着白色将跟踪到文件的底部，而不是窗口。我想在没有图像和javascript的情况下完成这项工作

我尝试了

html，body{height:100%}

，它只应用于窗口而不是文档。我还试着放置一个900px的主体背景图像，但它没有以container div为中心

你需要像

<html>

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

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

</body>

</html>


... 页面转到这里。。。

通过这种方式，您可以禁用实际页面正文上的滚动条，并且所有滚动标记将文档“放在”realbody“div的“内部”。通过在#realbody上设置适当的样式，您可以根据需要拉伸背景。

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

添加以下CSS：

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

实际上，您可以使用带有clear:both的特殊分隔符div，强制包含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是否说这是好的还是坏的做法，可能是坏的，但它是有效的。

一个粘性的页脚应该可以完成这一点：

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

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

希望这能对其他人有所帮助。

我认为您可以使用overflow:在包含白色部分的任何元素上可见来实现这一点。最简单的想法通常是最好的想法：）