如何使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扩展以适应可用的垂直空间？

回答

相关问题