当 div 容器下方有页脚时，根据浏览器的大小调整其大小答案

【问题标题】：Resizing the size of a div container based on the size of the browser when there is a footer under it当 div 容器下方有页脚时，根据浏览器的大小调整其大小
【发布时间】：2016-10-09 04:59:02
【问题描述】：

我一直在无聊地做一个网站，在主页上（最终每个页面上都会有）有一个页脚，就像在stackoverflow上的一样，在主页上有一个页眉，一个部分顶部、主要部分和页脚的文本。我希望在调整页面大小时扩展主 div，并且最小高度为 500 像素。

到目前为止我尝试过的代码：

.tutorials {
    background: linear-gradient( 180deg, rgb(240,230,220), rgb(200,190,180) );
    min-height: 500px;
    height: 66%;
    left: 0;
    right: 0;
    margin-top: 0px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

即使此代码调整了主 div 的大小，页脚文本也不会在主 div 展开时向下移动，这会阻止页脚文本。此外，如果我使页面小于最小高度然后向下滚动，而不是主 div 为 500px 并且页脚位于其下方，当我滚动时，div 的顶部将停留在固定位置并形成一个空白区域在顶部文本和主 div 之间。当我继续向下滚动时，而不是显示页脚，它上面的这个间隙变得更远了。添加代码位置：固定没有任何帮助。我更喜欢使用 HTML、CSS 或 jQuery 来解决这个问题，但如有必要，我也可以使用其他语言。

【问题讨论】：

如果您需要帮助，您需要与我们分享更多代码。
请为我们的实验创建一个 plunker 或 codepen，这样会更容易找到正确的解决方案

标签： jquery html css

【解决方案1】：

我对你的具体情况并不肯定，但我相信我可以提供帮助。我将您的问题解释为您希望主 div 扩展而页脚保持在其下方。您可以将页脚的位置设置为相对 (position: relative;)，然后使用clear: both; 确保它不会骑在它上面的任何 div 上。以下是它的实际示例：

#main{
  width: 70%;
  height: 20vw;
  float: left;
  text-align: center;
  background-color: orange; 
  min-height: 150px;
}

#side{
  width: 30%;
  height: 20vw;
  float: left;
  text-align: center;
  background-color: yellow;
  min-height: 150px;
}

#footer{
  width: 100%;
  clear: both;
  text-align: center;
  background-color: blue;
}

<html>
   <body>
     <div id="main"><h1>Main</h1></div>
     <div id="side"><h1>Side</h1></div>
     <div id="footer"><h1>Footer</h1></div>
   </body>
</html>

【讨论】：