如何使用html/css將容器div從頁眉伸展到頁腳？

我想伸展我的紅色content cless從頁腳延伸到頁眉。我知道如果我填充它的內容，但我該如何讓它伸展？如何使用html/css將容器div從頁眉伸展到頁腳？

您可以克隆該項目here

相關代碼：

HTML：

<body> 
    <div class="wrapper"> 
     <div class="header"> 
      <div class="nav"> 
       <div class="logo"> 
        <strong> 
         <a href="index.html"> 
          <img src="images/logo.png" alt="Sam Jarvis logo"/> 
         </a> 
        </strong> 
       </div> 
       <div class="menu"> 
        <ul> 
         <li><a href="#home">HOME</a></li> 
         <li><a href="#about">ABOUT</a></li> 
         <li><a href="#work">PORTFOLIO</a></li> 
         <li><a href="#clients">CONTACT</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div class="content"> 

     </div> 
    </div> 
    <div class="footer"> 
     <div class="footercontent"> 
      <p>&copy; 2013 Friend | Design and Development. All Rights Reserved.</p> 
     </div> 
    </div> 
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> 
</body>

CSS：

.wrapper { 

    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -6.25em; 
} 

.header { 
    width: 100%; 
    height: 100px; 
    background-color: #000000; 
    margin: 0 auto; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 300; 
} 

.content { 
    width: 1000px; 
    border: 1px solid #ff0000; 
    margin: 0 auto; 
    height: 100%; 
    min-height: 100%; 
}

enter image description here

來源

2013-07-05 eveo

兩

兩件事情：

添加規則html,body {height:100%}
取出height: auto !important;從#wrapper

jsFiddle example

來源

2013-07-05 00:24:57 j08691

邪惡的感謝。這工作。刪除了，並添加了「溢出;隱藏「，因此我可以添加數據並且不會混淆頁腳和內容的佈局。訣竅了。 – eveo

，你正在尋找的被命名爲「粘頁腳」，你可以請查看此URL中的示例： http://ryanfait.com/sticky-footer/

你的HTML必須具有特定的結構......

<body> 
    <div class="wrapper"> 
     [YOUR CONTENT INCLUDING HEADER] 
     <div class="push"></div>[this div is required] 
    </div> 
    <div class="footer"> 
     [YOUR FOOTER] 
    </div> 
</body>

記住：如果.push和.footer具有高度：100像素;那麼.wrapper必須有margin：0 auto -100px。

注意應用的每一種風格，因爲每一種風格都很重要。

來源

2013-07-05 00:36:20 Polak

這正是我已經使用的;）嘿嘿 – eveo

如何使用html/css將容器div從頁眉伸展到頁腳？

回答

相關問題