将页脚设置为内容或页面结尾

Question

如果内容大于一页，我正在寻找将页脚设置为页面结尾或内容结束的可能性。 我不想有一个固定页脚的内容是可滚动的。 我不知道这是否可能。

所以，这是我的代码。 class =“div1”的div包含内容。 内容包含内容以及页脚。

<div class="div1"> 
    <div class="content"> 
     <div class="myContent"></div> 
     <div class="myContent"></div> 
     <div class="myContent"></div> 
     <div class="footer"></div> 
    </div> 
</div> 

页脚的高度为50px。 我的问题如下： 如果我有一个屏幕高度：500px，内容只有150px高，页脚被设置在class =“myContent”的最后一个div元素之后。 它应该设置为页面的结尾，就像我通过

 
bottom:0;position:fixed

收到的效果一样。但是，如果内容高度为600px，则应该在class =“myContent”的最后一个div后面设置页脚。这里不需要任何样式。

你知道如何解决它吗？

Answer 1

你的意思是Make the Footer Stick to the Bottom of a Page？ 或本one

的CSS

html, body {height: 100%;} 

#wrap {min-height: 100%;} 
#main {overflow:auto; 
padding-bottom: 150px;} /* must be same height as the footer */ 

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

和HTML

<div id="wrap"> 

    <div id="main"> 

    </div> 

</div> 

<div id="footer"> 

</div> 

Answer 2

我想这可能会帮助你摆脱掉这个问题：

.footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px} 

这样可以解决目标：

<div style="position:absolute"> 
    <div style="position:absolute"> 
     <div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div> 
     <div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div> 
     <div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div> 
     <div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div> 
    </div> 
</div>