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

我想让第一个div

layer1

（红色块）显示窗口的完整大小，可缩放。

Layer2

（蓝色块）假定始终位于

layer1

下。但是，当我使窗口的高度变短时，我发现 Layer-2转到 Layer-1中，请参阅下面的

图像。

所以我尝试在

layer1

上应用

overflow:hidden

，但是

layer2

蓝色区域仍然在layer1上重叠。如何以正确的方式实现这一点。就好像把视窗的大小改成手机一样，它看起来不太合适：（

请查看移动视图

如果有人能帮忙，谢谢

HTML

---

试试这段代码，它应该与您的HTML示例一起工作

CSS代码

html，正文{ 高度：100%；}

正文{填充：0； 边距：0；}

.第1层{ 保证金：自动0； 宽度：100%； 身高：100%； 左：0； 排名：0； 背景：红色；}

.第二层{ 背景：蓝色； 最高：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;}

---

它应该做你想做的事情：

请替换此css并尝试一下

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

---

我没有详细解释你想要什么位置：绝对是问题的原因。当红色大于屏幕高度时，文本仍然溢出

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

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