html - 将相对 div 拉伸(stretch)到页面的页脚/底部

Question

当我的主 div 内容不足时，我很难将页脚放在底部。但我用粘性页脚技巧修复了它。但不幸的是，我仍然遇到这个问题，当内容不足时，我的主 div 不会一直延伸到页脚。如果主 div 的底部边缘 + 页脚小于视口(viewport)，我通过在空白区域添加额外的 div 来修复此问题。但这不再是一个选项，因为我想支持非 js 用户。

html, body {
  height: 100%;
  background-color: #678dae;
  
  margin: 0px;
  padding: 0px;
}

#wrap {
  min-height: 100%;
}


#main {
  
  width: 70%;
  
  /* I need them to be centered like this because my div is being resized from time to time */
  margin-left: auto;
  margin-right: auto;
  
  overflow:auto;
  padding-bottom: 150px;
  background-color: #fff;
  
}  


#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
    background-color: #333;
	clear:both;
} 

<div id="wrap">

	<div id="main">

		<div id="content">
             <p>Div content</p>
          
          
            <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->     
          
     
		</div>	

	</div>

</div>

<div id="footer">
 <p>Footer content</p>
</div>

Answer 1

请试试这个:

#footer {
    background-color: #333;
    bottom: 0;
    height: 150px;
    position: absolute;
    width: 100%;
}