单页响应式网站？

我想创建一个只有一个网页的网站，这是响应。这个想法是向下滚动锚点。单页响应式网站？

但是，我不知道如何才能让所有的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插件，我几乎浏览了几乎所有的免费版本。

来源

2014-01-08 Claudio

把你的相关的HTML结构这里并尽量使测试在jsFiddle案件。 – Khamidulla

http://en.wikipedia.org/wiki/Single-page_application – ssilas777

您可以使用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

来源

2014-01-08 08:13:12

工程，但我正在寻找一个跨浏览器的解决方案。 – Claudio

然后你应该做html，body {height：100％}和你的.targetDiv {height：100％} –

我的第一个div只包含1行文本，所以它只会裁剪到30px高。 – Claudio

他们的工作，如果你已经设置为100％的身体和其他主要的div！

套装bodyheight: 100;，而不是auto

那么对于#intro1和#intro1：删除所有类型的定位像margin，top等，然后这会工作....

basic demo（调整大小的浏览器然后运行它看到整个视图的DIV - 端口区域）

来源

2014-01-08 08:04:42 NoobEditor

我想你应该设置

HTML { height: 100%;}

Check this question first

来源

2014-01-08 08:21:24 indaloma

单页响应式网站？

回答

相关问题