HTML5/CSS全高佈局

好吧，這是我的基本的網站結構：HTML5/CSS全高佈局

<body> 
    <div id="wrapper"> 
     <header><a href="/"> </a></header> 
     <nav> 
      <ul> 
       <li><a href="...">...</a></li> 
       <li><a href="...">...</a></li> 
       <li><a href="...">...</a></li> 
      </ul> 
     </nav> 
     <div id="content"></div> 
     <footer><a href="/"> </a></footer> 
    </div> 
</body>

這裏是我的CSS基礎知識：

html 
{ 
    font-size: 100%; 
    height: 100%; 
    line-height: 1.4; 
    overflow-y: scroll; 
} 

body 
{ 
    background: #EEE url("../images/background.png") repeat-y center center fixed; 
    color: #333; 
    height: 100%; 
    font: 1em 'Lato-Regular'; 
    margin: 0; 
    padding: 0; 
} 

#wrapper 
{ 
    height: 100%; 
    margin: 0 auto; 
    width: 960px; 
} 

#content 
{ 
    min-height: 460px; 
    height: auto !important; 
    height: 460px; 
    margin: 20px 0; 
}

這是我想達到的目的（不使用javascript hacks，最好）：

頁眉和頁腳高度由其內容大小決定。
div#content應該有一個X像素的最小高度，但另外擴大盡可能多的，因爲它想包括頁面的內容。
div#wrapper應伸展以填充整個視口高度，div#content是可伸縮的柔性部分。
我試圖儘可能多的瀏覽器，但我沒有真正進入完整的跨瀏覽器兼容性。讓我們的舊瀏覽器死亡。

我越來越怪異的結果：

正如你所看到的，包裝不拉伸，以填補瀏覽器窗口，並通過後果，頁腳（黑條上底部）浮在頁面的中間。你能幫我嗎？

來源

2016-01-24 Tommaso Belluzzo

你能創建的jsfiddle？用你提供的代碼我不能重新創建它。 –

那是因爲你沒有任何內容......相信我，當你填充300行內容時，它會沒事的。內容屬性，最小高度，高度和高度都是無用的...默認情況下，高度是自動的，因爲它填充容器的內容。 –

你可以設置'body'的背景以匹配你的'footer'，這樣你就不會在你的頁腳下看到更輕的背景。然後將較亮的背景移到你的'＃內容「。 – Rafi

display:flex;是容易nowdays （除了它看起來很像這個問題Fill remaining vertical space with CSS using display:flex）

html 
 
{ 
 
    font-size: 100%; 
 
    height: 100%; 
 
    line-height: 1.4; 
 
    overflow-y: scroll; 
 
} 
 

 
body 
 
{ 
 
    background: #EEE url("../images/background.png") repeat-y center center fixed; 
 
    color: #333; 
 
    height: 100%; 
 
    font: 1em 'Lato-Regular'; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper 
 
{ 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    width: 960px; 
 
    display:flex; 
 
    flex-direction:column 
 
} 
 

 
#content 
 
{ 
 
    flex:1; 
 
    margin: 20px 0; 
 
/* overflow:auto; add this and it will show a scrollbar when needed and won't push footer down */ 
 
} 
 
footer,header { 
 
    background:lightgray; 
 
    /* no need to set any height, a min-height eventually */

<div id="wrapper"> 
 
     <header><a href="/">header</a></header> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="...">...</a></li> 
 
       <li><a href="...">...</a></li> 
 
       <li><a href="...">...</a></li> 
 
      </ul> 
 
     </nav> 
 
     <div id="content"></div> 
 
     <footer><a href="/">footer</a></footer> 
 
    </div>

來源

2016-01-24 15:21:03

是的，但flexbox佈局模塊不支持在IE8和IE9 :( –

@ Nasco.Chachev閱讀OP的要求（*的最後一句特別是*）的＃4;） –

@ GabyakaG.Petrioli是我讀過的男人它。我在同樣的觀點，讓舊的瀏覽器死亡：但是，我只是說，flexbox尚未完全支持..沒有仇恨tho :) –

有一個單元的高度和寬度隨css3附帶，許多人並不真正使用或知道。 vw和vh表示視口寬度和視口高度。你應該使用它們。如果你想讓你的其中一個div獲得完整的高度，那麼設置高度：100vh，如果它是一個圖像，並且你不希望它被垂直壓縮，則將寬度設置爲：auto。我使用vw和vh很多。最大的，甚至字體大小，我將使用font-size：2vw或類似的東西，1.6或另一個十進制，這樣無論設備的寬度如何，它總是2視口寬度（2vw）。玩弄它，你會發現正確的尺寸。設置頁腳和導航設置爲vh或vw，並且它們將與您正在使用的任何設備保持相稱。

來源

2016-01-24 15:20:10 RuNpiXelruN

HTML5/CSS全高佈局

回答

相關問題