<div> height=100% 只填满一屏答案

【问题标题】：<div> with height=100% only fills one 'screenful'<div> height=100% 只填满一屏
【发布时间】：2009-07-29 05:45:19
【问题描述】：

请检查以下示例：

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

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

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

提前致谢！

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

事实上，这很重要，因为它首先是导致滚动的原因...编辑了页面以反映您的一些修改...
如果它足够灵活，我会选择 html 元素的背景。

【解决方案2】：

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

您可能感兴趣的是position: fixed，尽管 iirc 旧版 IE 对此有一些问题：ref, ref2

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

效果很好。但是，这会使滚动条不合适，这是不可取的......
你说得对，横向卷轴被搞砸了。我修好了。

【解决方案5】：

通过强制一定高度（大于固定大小的元素）并接受限制来“解决”问题。

感谢您的所有回答，不过，它们可能在其他一些情况下会有所帮助！

【讨论】：