Question

我的页面中有两个div，我希望它们的宽度和高度都设置为浏览器的宽度和高度，所以我必须向下滚动才能看到第二个div。

这怎么可能？

Eidt：我忘了提到我也希望这些div中的内容垂直居中。

到目前为止我所做的是将this链接首先回答并将该代码放入另一个div中，该div需要100％的高度。

这就是我现在所拥有的：

HTML：

<body>
    <div id="first"><div class="outer"><div class="middle"><div class="inner"><h1>Title 1</h1></div></div></div></div>
    <div id="second"><div class="outer"><div class="middle"><div class="inner"><h1>DTitle 2</h1></div></div></div></div>
</body>

CSS：

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto;
width: 100%;
}

#first, #second {
height: 100%;
}

h1 {
text-align: center;
}

Answer 1

您可以执行以下操作：

<强> HTML

html, body { height:100%; }
.box { height:100%; }
.one { background:#eee; }
.two {  background:#ccc; }

<强> CSS

<div class="box one">1</div>
<div class="box two">2</div>

<强> JSFiddle Demo

两个div彼此叠加，每个div占据浏览器屏幕的整个高度（和宽度）

1 个答案: