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

【问题标题】：How to make a div expand to fit available vertical space?如何使 div 扩展以适应可用的垂直空间？
【发布时间】：2017-09-10 00:04:58
【问题描述】：

我正在寻找一种方法来使包含我的主页内容的 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 内的空白空间，因此很难获得我想要的外观。我怎样才能做到这一点？

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

在 div 上同时使用 top 和 bottom 属性会导致 IE6 和 IE7/8 在 quirks 模式下出现问题。不知道 OP 是否愿意支持这些。
使用顶部/底部是个好主意，我总是忘记那些。感谢您的详细回答！
这种顶部/底部技术是否可以使用固定宽度居中的 960 内容 div？
@Jordan，一定要确保周围的 div 是相对的，而内部的 div 是绝对的。
@sproketboy 我通过在#content 的 CSS 中添加 overflow:scroll 来滚动工作。

【解决方案2】：

关于页脚的好文章在 A List Apart：http://www.alistapart.com/articles/footers/

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

【讨论】：

【解决方案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>

【讨论】：