具有不同内容高度的粘性页脚,无需页面刷新
Posted
技术标签:
【中文标题】具有不同内容高度的粘性页脚,无需页面刷新【英文标题】:Sticky footer with varying content height without page refresh 【发布时间】:2013-10-20 14:57:53 【问题描述】:我正在使用“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/
【问题讨论】:
【参考方案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,并保持其他页脚的可见性:false。如果是这样,请使用与内容相对位置的 footer2 并保持其他页脚的可见性:false。
【讨论】:
对于这么小的问题,您的解决方案似乎过于复杂。我将不得不重复页脚两次,这不是简单的“这是我的页脚”。 嗯,我今天再试试看。 对不起,我误读了您的问题。我习惯于仅使用 css 来执行此操作。但这里有一个链接可能有助于您尝试做的事情:***.com/questions/16566468/… @JFelton 是的,如果可能的话,我确实想要一个完整的 CSS 解决方案。 Javascript 只是切换可见内容<div>
。如果只能通过 CSS 来实现它总是更好。【参考方案2】:
在下面的示例中,只需在 div.page-wrap
中添加更多内容,然后观察页脚按要求被下推。
HTML
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
*
margin: 0;
html, body
height: 100%;
.page-wrap
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
.page-wrap:after
content: "";
display: block;
.site-footer, .page-wrap:after
height: 142px;
.site-footer
background: orange;
见this example on CodePen。
提示:如果您的页脚不是固定高度或者您想让它具有响应性,您需要计算(使用 Javascript).site-footer
height
和 .page-wrap
@987654328 @ 值基于.site-footer
的自然高度。您可能还希望在调整浏览器窗口大小时更新此值。或者对于非 JS 解决方案,您始终可以使用媒体查询。
【讨论】:
以上是关于具有不同内容高度的粘性页脚,无需页面刷新的主要内容,如果未能解决你的问题,请参考以下文章