單頁響應式網站？

我想創建一個只有一個網頁的網站，這是響應。這個想法是向下滾動錨點。單頁響應式網站？

但是，我不知道如何才能讓所有的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

單頁響應式網站？

回答

相關問題