一個網頁與一系列面板，每個視口的大小

我一直在尋找一種方法來實現這一點，但似乎無法找到答案。我想創建一個由一系列面板組成的單頁網站，每個面板的視口大小（高度和寬度都不同）以及不同的背景顏色。一個網頁與一系列面板，每個視口的大小

因此，當我進入頁面時，我的視口被填充了面板1，然後我可以向下滾動到面板2，該面板也將完全填充視口。

下面是一個快速測試頁來說明我的意思：http://dev.manifold.ws/test/ 但是，顯然，我想要的是每個面板的高度爲視口的100％（不是固定的高度）。

下面是一個更復雜的網站，則成功地做這件事：http://www.deuxhuithuit.com

我覺得必須有一個相當簡單的方式來實現這一點，但我似乎無法找到它。

任何幫助將不勝感激。我需要一些jQuery嗎？我應該依賴一個插件嗎？或者有沒有辦法用CSS來做到這一點？

感謝，

-Thom

來源

2012-08-14 thom_p

好吧，看起來我終究明白了。最後它非常簡單。不需要jQuery或插件。我更新了我的測試頁從一個工作示例：http://dev.manifold.ws/test/

這裏的HTML：

<body> 

    <section id="red"> 
    </section> 

    <section id="blue"> 
    </section> 

    <section id="green"> 
    </section> 

</body>

而CSS：

html,body { 
height:100%; 
margin:0; 
padding:0; 
} 

#red { 
min-height:100%; 
position:relative; 
background:#F00; 
} 

#blue { 
min-height:100%; 
position:relative; 
background:#00F 
} 

#green { 
min-height:100%; 
position:relative; 
background:#0F0; 
}

漂亮的直線前進。

來源

2012-08-14 21:30:24

您是否有理由對每個部分使用'position：relative'？我嘗試沒有，它似乎工作正常，只是想知道... – Jim 2014-06-27 03:08:49