純粹的CSS 100％屏幕高度

-1

這應該很簡單，但我無法弄清楚。我已經標記像這樣：純粹的CSS 100％屏幕高度

<section id="container"> 
    <article></article> 
    <article></article> 
    <article></article> 
    <article></article> 
</section>

我怎樣才能獲得每篇文章用純CSS是窗口的整個高度，並且沒有JS？

來源

2013-03-05 Chad

你應該確保的HTML，身體和#container的標籤也以100％的高度：

html, body, #container { 
    height: 100%; 
}

例子：http://jsfiddle.net/aXPwL/1/

來源

2013-03-05 21:44:42 opznhaarlems

好吧，無論如何，每個文章都不是屏幕上100％的屏幕高度。 – jtheman 2013-03-05 21:51:38

它不是屏幕高度的100％，而是窗口高度的100％（如問題中所述）。或者我在這裏錯過了什麼？你使用的是什麼瀏覽器？ – opznhaarlems 2013-03-05 21:56:55

<section id="container" style="height:100%"> 
    <article style="height:100%;"></article> 
    <article style="height:100%;"></article> 
    <article style="height:100%;"></article> 
    <article style="height:100%;"></article> 
</section>

來源

2013-03-05 21:45:09

所有元素開始從HTML層疊下降文章元素需要指定100％的高度，否則任何子元素將始終只與其父元素一樣高。

My JSFiddle表明

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
} 
section { 
    height: 100%; 
} 
article { 
    background: blue; 
    width: 100%; 
    height: 100%; 
}

還要注意，不知道這是你想要的，但由於物品並非堆放在彼此的頂部，用戶將不得不向下滾動才能看到所有4篇文章，使得實際頁面高度是瀏覽器窗口高度的4倍。

來源

2013-03-05 21:50:59

純粹的CSS 100％屏幕高度

回答

相關問題