第一个Div全尺寸的窗口，白色空间

Question

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%;
}

Answer 1

试试这段代码，应该使用你的HTML示例。

live demo

CSS代码

  

的HTML，身体{    身高：100％;}

     

body {padding：0;      margin：0;}

     

.layer1 {      保证金：自动0;      宽度：100％;      身高：100％;      左：0;      顶部：0;       背景：红色;}

     

.layer2 {    背景：蓝色;    顶部：100％;   }

Answer 2

如果您将样式更改为以下

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

Answer 3

请替换此CSS并尝试...

.layer2{
  background:blue;
  position:relative;
  top:100%;
  width: 80%;
  margin:0 auto;
}