将相对div拉伸到页面的页脚/底部

Question

当我的主要内容不足时，我在将我的页脚保持在底部时遇到了很多麻烦。但我用粘性页脚技巧修复了它。但不幸的是，我仍然遇到这个问题，因为我的主要内容在内容不足的情况下不会一直延伸到页脚。如果主div的底边+页脚小于视口，我通过在空白处添加一个额外的div来修复这个问题。但这不再是一种选择，因为我想支持非js用户。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

请试试这个：

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

Answer 2

＆＃13;

＆＃13;

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: fixed;
	margin-top: -150px; /* negative value of footer height */
	height: 25px;
    background-color: #333;
    bottom:0;
  width:100%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我更改了一些页脚属性

Answer 3

height: inherit;可能有所帮助..这通常有助于身高方面...