Question

请检查以下示例：

http://www.esaer.com.br/csstest/

如果没有出现垂直滚动条，请调整窗口大小。问题是：当你向下滚动时，隐藏的屏幕部分不会显示蓝色div背景，其高度为100％，即使红色div强制“页面”的整体高度大于一个屏幕。

我希望蓝色背景跨越整个页面，即使页面大于一个屏幕。我怎么能做到这一点？（我已经建议使用javascript解决方案，但更喜欢仅使用CSS的方法）

提前致谢！

Answer 1

内部元素是否重要？如果不是：

* { margin:0; padding:0; }
html, body { height:100%; }
#main-div { min-height:100%; width:400px; margin:0 auto; background:blue; }

<body><div id="main-div">test</div></body>

Answer 2

100％表示可视区域的100％，即屏幕尺寸，因此按设计工作。

您可能感兴趣的是position: fixed，虽然旧的IE浏览器存在以下问题：ref，ref2

Answer 3

如果你在主div中使用填充然后在内部div中使用相对位置它可能会起作用，我不太确定你是否想要这种行为，希望这可以让你更接近什么你正在寻找。

#main-div {
    background:blue none repeat scroll 0 0;
    height:100%;
    left:50%;
    margin-left:-200px;
    position:absolute;
    width:400px;
    padding:20;
}
#sub-div {
    background:red none repeat scroll 0 0;
    height:200px;
    left:50px;
    position:relative;
    width:200px;
    float:left;
}

Answer 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Test</title>
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
        overflow-y:hidden;
        overflow-x:hidden;
    }

    #main-div {
        width: 400px;
        height:100%;
        position: absolute;
        left: 10%;
        background: blue;
    }

    #sub-div {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50px;
        top: 400px;
        background: red;
    }
    #container{
        position:absolute;
        width:100%;
        height:100%;
        overflow-y:scroll;
        overflow-x:scroll;
    }
</style>
</head>
<body>
    <div id="main-div"></div>
    <div id="container">
        <div id="sub-div"></div>
    </div>
</body>
</html>

Answer 5

通过强制某个高度（大于固定大小的元素）来解决问题，并且生活有限制。

感谢您提供所有答案，但在其他一些情况下，它们可能会有所帮助！

<div> with height = 100％只填充一个'screenful'</div>

5 个答案: