Question

我正在尝试创建一个只有一个页面的网站，这是一个响应式的。我们的想法是用锚点向下滚动。

但是，我不知道如何让所有div按预期填满整个屏幕。

body {
    width: 100%;
    height: auto;
    font-family: Source Sans Pro, Century Gothic;
    background: url('images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;
}

ul {
list-style: none;
}

#intro1 { 
font-family:'Press Start 2P', cursive; 
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
height: 100%;
width: 100%;
position: absolute; 
}

#intro2 { //This doesn't work. I've also tried to set top with pixels.
top:100%;
height:600px;
width: 100%;
position: absolute;
font-size: 80px; 
display: block; 
text-align: center; 
margin-bottom: auto; 
margin-top: auto; 
top: 50%;  
font-family: Source Sans Pro;
height: 100%;
width: 100%;
}

#products { //This works fine for some reason.
top: 800px;
width: 100%;
position: relative;
background: url('images/circuit.jpg');
font-family: Source Sans Pro;
font-size: 16px;
margin: 0;
text-align: center;
}

我怎么能让每个div填满整个屏幕？我不想使用任何jQuery插件，我已经浏览过了几乎每一个免费的。

Answer 1

如果您将body设置为100％而其他主要div也是有效的！

设置body height: 100;而不是auto

然后是#intro1和#intro1：删除所有类型的定位，例如margin，top等，然后这将有效....

basic demo（调整浏览器大小，然后运行它以查看整个视图端口区域的div ）

Answer 2

您可以使用 css的VH单位。这实际上是视口总高度的单位。所以，100vh = 100% height of the viewport。

以下是一个例子：

<强> HTML：

<div id="content1" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content2" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>
<div id="content3" class="content">
    <a href="#content1">content1</a> | 
    <a href="#content2">content2</a> | 
    <a href="#content3">content3</a> 
</div>

<强> CSS：

.content{height:100vh}
#content1{background:#EEE}
#content2{background:#CCC}
#content3{background:#AAA}

JSfiddle： http://jsfiddle.net/Vj3dZ/

参考：http://snook.ca/archives/html_and_css/vm-vh-units

注意：使用前，必须检查浏览器兼容性：http://caniuse.com/viewport-units

Answer 3

我认为你应该设置

HTML { height: 100%;}

Check this question first

一页响应式网站？

3 个答案: