html - 窗口的第一个Div全尺寸，空白

ONLINE SAMPLE

我想使第一个div layer1（红色块）显示窗口的完整大小，并且可缩放。
Layer2（蓝色方块）应该始终位于layer1下。但是，当我将窗口高度缩短时，我发现layer2转到了layer1的中间，请参见下图

 

因此我尝试在overflow:hidden上应用layer1，但是layer2蓝色区域在layer1上仍然重叠。如何以正确的方式做到这一点。好像将窗口大小更改为与移动电话一样，它看起来不正确:(

请查看手机视图



如果有人可以帮助。谢谢

的HTML

   <div class="layer1">
      <h1>HELLO WORLD</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
    <div class="layer2">
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

的CSS

html,body{
  height: 100%;

}
body{
 padding: 0;
    margin: 0;
}
.layer1{
width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
     background:red;

}
.layer2{
  background:blue;
  position:relative;
  top:100%;
}

最佳答案

如果您将样式更改为以下样式

html,body{ height: 100%; padding: 0; margin: 0;}
.layer1{ width: 100%; min-height: 100%; background:red; overflow:auto;}
.layer2{ background:blue; position:relative; overflow:auto;}

它应该执行您想要的操作：fiddle

关于html - 窗口的第一个Div全尺寸，空白，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21675895/