如何使div擴展以適應可用的垂直空間？

我正在尋找一種方法，使包含我的主要頁面內容的div擴展爲適合添加我的頁眉和頁腳後留下的空間。該HTML的佈局，像這樣：如何使div擴展以適應可用的垂直空間？

<div id="wrapper"> 
    <div id="header-wrapper"> 
     <header> 
      <div id="logo-bar"></div> 
     </header> 
     <nav></nav> 
    </div> 
    <div id="content"></div> 
</div> 


<div id="footer-wrapper"> 
    <footer></footer> 
</div>

它的設計，這樣的頁腳總是過去的頁面的底部由#wrapper指定的最小高度設置爲100％。問題在於#content不會展開以填充#wrapper中的空白空間，因此很難獲得我想要的外觀。我怎樣才能做到這一點？

來源

2010-02-28 vilhalmer

編輯：
爲什麼不使用頂部和底部。這是一個完整的例子。
您可以調整頂部和底部值，以優化頁眉/頁腳的位置。

<html> 
<head> 
    <style type="text/css"> 
    BODY { 
    margin: 0; 
    padding: 0; 
    } 

    #wrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    } 

    #header-wrapper { 
    position: absolute; 
    background-color: #787878; 
    height: 80px; 
    width: 100%; 
    } 

    #content { 
    position: absolute; 
    background-color: #ababab; 
    width: 100%; 
    top: 80px; 
    bottom: 50px; 
    } 

    #footer-wrapper { 
    position: absolute; 
    background-color: #dedede; 
    height: 50px; 
    width: 100%; 
    bottom: 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header-wrapper"> 
     <div id="header"> 
     <div id="logo-bar">Logo</div> 
     </div> 
     <div id="nav"></div> 
    </div> 
    <div id="content">Content</div> 
    <div id="footer-wrapper"> 
     <div id="footer">Footer</div> 
    </div> 
    </div> 
</body> 
</html>

來源

2010-02-28 16:28:01 Zyphrax

同時使用頂級**和**底部性質上'div'導致IE6和怪癖模式IE7/8的問題。不知道OP是否想支持這些。 – 2010-02-28 17:04:35

使用頂部/底部是一個好主意，我總是忘記這些。感謝您的詳細解答！ – vilhalmer 2010-03-01 12:24:54

以固定寬度爲中心的960 content div，這種頂/底技術是否可行？ – 2011-12-24 01:05:35

一篇好文章的頁腳是在列表除了：http://www.alistapart.com/articles/footers/

它的你如何在與擴大內容的div底部位置頁腳的實際例子。

來源

2010-02-28 16:37:38 Patrick

偉大的文章，感謝傳遞它。 – vilhalmer 2010-03-01 12:24:06

該解決方案解決了滾動問題。當頁面過大，您的頁腳放置在整個內容2條新線：

<style> 
     #container { 
     position: relative; 
     height: 100%; 
    } 
    #footer { 
     position: absolute; 
     bottom: 0; 
    } 
    </style> 

    </HEAD> 

    <BODY> 

    <div id="container"> 

     <h1>Some heading</h1> 

    <p>Some text you have</p> 

    <br> 
    <br> 

    <div id="footer"><p>Rights reserved</p></div> 

    </div> 

    </BODY> 
    </HTML>

來源

2017-09-09 16:04:58 LuckyLuke82

如何使div擴展以適應可用的垂直空間？

回答

相關問題