我正在使用“CSS Sticky Footer”技术让页脚在内容小于浏览器窗口高度时停留在屏幕底部，而如果内容高度为大于浏览器窗口的高度。
这适用于普通内容，但是我有一些页面在不刷新页面的情况下更改了内容。 (使用 Javascript 替换 <div> 的内容，或将 <div> 从 display: none 更改为 display: block )。当我遇到原始页面的高度小于窗口(因此页脚位于底部)并且新内容使其大于窗口的情况时，内容将放在页脚“后面”(而不是移动新内容下方的页脚)。
有没有办法强制浏览器“重新计算窗口的大小”并使用新的页面大小呈现页面内容？
<html>
<body>
<body>
<div id="wrapper">
<div id="header"><!-- some header content here --> </div>
<div id="content" class="footer_padding"> <!-- .footer_padding gives room for the sticky footer -->
<div class="items"><!-- some normal content here which doesn't change, a list of items in my case, which when clicked, some info is displayed below -->
<a href="#" onClick="javascript:showInfoPage('longpage');">Show Item Details</a>
</div>
<div id="text">
<div class="iteminfo" id="defaultpage" style="display: block">
<!-- default content here, height smaller than window height -->
<p>Hello this is some content.</p>
</div> <!-- #defaultpage .iteminfo -->
<div class="iteminfo" id="longpage" style="display: none">
<!-- item content here, height larger than window height -->
<p>This is some long content...</p>
<p>This is some long content...</p>
<p>This is some long content...</p>
</div> <!-- #defaultpage .iteminfo -->
</div><!-- #text -->
<script language="javascript1.5" type="text/javascript">
function showInfoPage(slug)
{
jQuery('.iteminfo').css("display", "none");
jQuery('#'+slug).css("display", "block");
}
</script>
</div><!-- #content -->
</div> <!-- #wrapper -->
<div id="footer">
<!-- the sticky footer -->
<p>Hello, I am the footer, I should always be at the bottom</p>
</div>
</body>
</html>
CSS:
html
{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
body
{
background-color: #ffffff;
font-size:15px;
color: #333333;
text-align:center;
width: 100%;
height: 100%;
margin: 0px;
}
div#wrapper
{
width: 100%;
min-height: 100%;
}
div#content
{
margin: 0 0 0 0;
padding: 0px;
overflow: hidden;
display: block;
position: relative;
}
.footer_padding
{
padding-bottom: 40px;
}
#footer
{
position: relative;
margin-top: -40px;
text-align: center;
width: 100%;
padding: 10px 0px 10px 0px;
background:#FFFFFF;
clear: both;
}
我创建了一个 JSFiddle 在这里显示这个问题:http://jsfiddle.net/7mUDa/1/
最佳答案
尝试使用 javascript 来定位您的页脚。制作两个页脚并将它们放在单独的 div 中。
<div id="footer1>
this is my footer.
</div>
<div id="footer2">
this is my footer.
</div>
可以看到，两个div中的footer内容是一样的，然后通过javascript使用条件语句检查内容是否超出浏览器窗口:
$(window).height();
如果不超过高度，则使用绝对位置在屏幕底部的footer1，并保持另一个footer的visibility:false。如果是这样，请使用与内容相对位置的 footer2，并保持其他页脚的可见性:false。
关于html - 具有不同内容高度的粘性页脚，无需页面刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19478870/