html – 页面底部的位置页脚具有固定标题
我想将页脚定位在页面的底部,这个页面也有一个固定的页眉
>不与位置:固定 – 我不希望它保留在屏幕上,它应该是在页面的最后,并在滚动时表现正常。 这是一个更好地解释的图表: 以下是代码: >我准备了一个演示:JSFiddle <div id="header">Header</div> <div id="content"> <p>Some content...</p> </div> <div id="footer">Footer</div> body{ /* Just to enable scrolling in JSFiddle */ height: 1000px; } #header{ width: 100%; height: 100px; position: fixed; top: 0px; z-index: 1; } #content{ width: 100%; position: absolute; top: 100px; /*Height of header*/ z-index: 0; } #footer{ width: 100%; height: 100px; position: absolute; bottom: 0px; } /*For demo only*/ #header,#footer{ border: 3px dashed #333333; background: #FFFFFF; } #content{ background: #CCCCCC; height: 200px; } 解决方法
正如你所提到的,position:fixed将使页脚与视口相对而非页面本身定位。因此,我们必须将元素保持在正常流程中,并以某种方式将其定位到页面的底部。
有几种方法来实现这一点,这些方法已经在野外讨论了。 > A List Apart的文章Exploring Footers – 到Bobby Van Der Sluis,2004 粘页脚 在这个答案中,我会和Ryan Fait’s method一起去,因为它很简单易懂,也符合你的需要(页眉和页脚都有固定高度的情况)。 考虑到以下结构: <div id="content"> <!-- content goes here. It may (not) include the header --> </div> <div id="footer">Footer</div> 需要以下步骤: >设置< html>的高度和< body>元素到100%是下一步需要的1。 4.1添加间隔物 Example Here <div id="content"> <!-- content goes here --> <div class="spacer"></div> </div> <div id="footer">Footer</div> .spacer,#footer { height: 100px; } 4.2填充底部和箱子尺寸的组合 Updated Example #content { min-height: 100%; margin-bottom: -100px; /* Equivalent to footer's height */ padding-bottom: 100px; /* Equivalent to footer's height */ box-sizing: border-box; } (请注意,由于简洁,省略了供应商前缀) 添加标题 >如果标题应保持正常流程,您可以简单地将其添加到#content中,如下所示: <div id="content"> <div id="header">Header</div> ... >但是如果它应该是绝对的3,我们需要按照to prevent overlapping的顺序推送#content元素的内容。 因此,再次,我们可以在#content(Example Here)的开头添加一个间隔符: <div id="header">Header</div> <div id="content"> <div class="header-spacer"></div> <!-- content goes here --> <div class="footer-spacer"></div> </div> <div id="footer">Footer</div> 或者使用padding-top和box-sizing的组合如下: <div id="header">Header</div> <div id="content"> <!-- content goes here. --> </div> <div id="footer">Footer</div> #content { min-height: 100%; margin-bottom: -100px; /* Equivalent to footer's height */ padding-top : 50px; /* Equivalent to header's height */ padding-bottom: 100px; /* Equivalent to footer's height */ box-sizing: border-box; } Updated Example(请注意,由于简洁而省略了供应商前缀) 最后但并非不重要! 如今,所有主流的现代网络浏览器都支持 这是需要使
According to spec,绝对定位的元素是具有绝对或固定位置的元素。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |