HTML5/CSS頁腳問題，用100％的高含量

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"/> 
     <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    </head> 
    <body> 
     <section id="wrapper"> 
     <header> 
     </header> 
     <main> 
      <section class="content"> 
       Test 
      </section> 
     </main> 
     <footer> 
     </footer> 
     </section> 
    </body> 
</html>

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    background: #e4e4e4 !important; 
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif !important; 
    font-weight: 300; 
    color: #fff !important; 
} 

#wrapper { 
    min-height:100%; 
    position:relative; 
} 

header { 
    height: 193px; 
    line-height: 193px; 
    background: #bc0000; 
} 

main { 
    padding-bottom:137px; 
} 

.content { 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
    background: #000; 
} 

footer { 
    width:100%; 
    height:137px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background: #bc0000; 
}

我想黑內容框爲100 ％高度。

我已將此添加CSS

#wrapper, main, .content { 
    height: 100%; 
}

與本站看起來是這樣的：我怎樣才能讓黑色區域是從僅有頭到頁腳不破壞現場？

感謝

來源

2014-02-13 plexcell

background：＃e4e4e4！important; < - 在這種情況下，您應該永遠不需要使用！重要的 –

稍後我將使用引導程序，然後使用它。 – plexcell

頁眉的高度固定爲193px，所以你可以使用calc()功能

#wrapper, main, .content { 
    height: -webkit-calc(100% - 193px); 
    height: -moz-calc(100% - 193px); 
    height: calc(100% - 193px); 
}

我沒有考慮到可能影響這個參數考慮其他值（如邊框，邊距等），所以調整這個值，以便它適合你的設計。

必要時使用供應商前綴。 Browser support for calc()

來源

2014-02-13 16:29:50 fcalderan

拿<header>出<section>（把它放在上面），你的解決方案將正常工作。

<body> 
     <header></header> 
     <section id="wrapper"> 
     <main> 
      <section class="content">

來源

2014-02-13 16:32:19

謝謝，我這樣做後，它會讓內容過度，但它不會制動網站：http://oi62.tinypic.com/2dglz5l.jpg 任何想法？ – plexcell

因爲'main {padding-bottom：137px; }'。你不會需要這個。 –

我還沒有得到它的工作...我做了一些改變。 http://jsfiddle.net/nDVcu/2/ 我會將193px的背景圖片添加到正文中，所以標題的目的就是這樣。有任何想法嗎？ – plexcell

HTML5/CSS頁腳問題，用100％的高含量

回答

相關問題