如何使 DIV 标题 100% 但仍允许垂直滚动？

Question

在这里寻找一些解决方案后，似乎每个人都遇到了我面临的相反问题（哈！）。这就是我想要完成的事情：我有一个页面加载时的 DIV 为 100% 宽度和 100% 高度。这样无论屏幕大小如何，我们总能获得完整的主页图像。但是，我们希望能够在其下方滚动以获取其他内容。我正处于一个我已经操纵它工作的地步，但它有问题。这是 HTML ::

<div id="ScalableImage"></div>
<div id="BlockWhite" style="height:1000px"></div>
<div id="BlockBlue1" style="height:300px"></div>
<div id="BlockBlue2" style="height:50px"></div>

您可以在此处看到“BlockWhite”的样式设置为 1000 像素高。那是因为它隐藏在“ScalableImage”后面。我不能让它在下面筑巢！！！

无论如何，这是 ScalableImage 和色块的 CSS ::

#ScalableImage {
position: absolute; 
display:block;
top:0; 
left:0; 
width:100%; 
height:100%;
max-height:900px;
background: url(/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:700;
  }

#BlockBlue1 {
position:relative;
float:left;
background-color:#c5d1d1;
width:110%;
margin-left:-10px;
margin-bottom:-10px;
min-height:20px;
clear:both;
}
#BlockBlue2 {
position:relative;
float:left;
background-color:#95aab2;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}

#BlockWhite {
position:relative;
float:left;
background-color: #fff;
width:110%;
min-height:20px;
margin-left:-10px;
margin-bottom:-10px;
clear:both;
}

想法？

谢谢！

Answer 1

“#ScalableImage”与“#BlockBlue1”重叠的原因是因为您的“#ScalableImage”样式中有position: absolute - 所以它被拉出布局，因此覆盖了其他元素。

要实现（我认为）您正在寻找的内容，您可能需要删除 position:absolute 样式，然后添加：

body, html{
    height:100%;
    margin:0;
}

（0 边距是为了防止浏览器渲染带有边距的 body/html 元素。）

我希望这对你有帮助。祝你好运！

（编辑）添加了一个 JSFiddle 来向您展示我所看到的：http://jsfiddle.net/BDd62/

（编辑 2）看到您的附加代码后，我想我已经确定了该空白的原因。这是因为您在“#htxt”上的上边距，在这种情况下实际上移动了它的父元素。 （你可以阅读更深入的解释here。你可以通过几种方式避免这种情况，但这里是我所做的 CSS 中的更改区域。如果这不是你想要的布局，请告诉我：

#bg {
    display:block;
    width:100%; 
    height:100%;
    max-height:900px;
    background: url(http://bwpcommunications.com/TESTING/images/Home_Slide_001.jpg) no-repeat center top fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:700;
}
#htxt {
    position:relative;
    font-family: 'Raleway';
    font-weight:bold;
    font-size: 6em;
    text-align:center;
    color:#FFF;
    width:80%;
    max-width:960px;
    line-height:100px;
    margin:0 auto 22%;
    padding:22% 0 0;
    z-index:800;
}
#hsubtxt {
    position:relative;
    font-family: 'Raleway';
    font-size: 3em;
    text-align:center;
    color:#FFF;
    width:80%;
    margin:2% auto 0;
    z-index:800;
}

希望对您有所帮助！这是您的updated JSFiddle 以查看完整代码，但我建议在完整的浏览器中运行它（因为您的布局没有针对 JSFiddle 环境的小窗口大小进行优化。