Question

我正在寻找一种方法来使包含我的主页内容的div扩展到适合添加页眉和页脚后留下的空间。 HTML的布局如下：

<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中的空白区域，因此很难获得我想要的外观。我该怎么做呢？

Answer 1

修改
为什么不使用顶部和底部。这是一个完整的例子您可以调整顶部和底部值，以优化页眉/页脚位置。

<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>

Answer 2

一个好的文章是在A List Apart：http://www.alistapart.com/articles/footers/

它有一个实际示例，说明如何使用展开的内容div将页脚放在底部。

Answer 3

此解决方案解决了滚动问题。当页面尺寸过大时，您的页脚将从整个内容中放置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>

如何使div扩展以适应可用的垂直空间？

3 个答案: