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”的样式是1000px高。那是因为它隐藏在“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 - 因此它会被拉出布局，因此会覆盖其他元素。< / p>

要实现您正在寻找的（我认为），您可能希望删除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环境的小窗口大小进行优化。

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

1 个答案: