位于页面底部的页脚有固定页眉
Dra*_*cir 21 html css sticky-footer
我想将页脚放在页面底部,它还有一个固定的标题...
不是
position: fixed- 我不希望它留在屏幕上,它应该只是在页面的末尾,并在滚动时表现正常.不在可见屏幕的底部 - 在页面的底部,即; 毕竟其他内容.
这是一个更好地解释的图表:
这是代码:
- 我准备了一个演示: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;
}
Has*_*ami 34
正如您所提到的,position: fixed将页脚放置在视口而不是页面本身.因此,我们必须将元素保持在正常流程中,并以某种方式将其放置在页面底部.
有几种方法可以实现这一目标,这些方法已经在野外进行了讨论.
例如:
- List Apart的文章Exploring Footers - 作者:Bobby Van Der Sluis,2004
- footerStickAlt - 由Craig Erskine撰写,2005年
- Sticky Footer - Shelly Cole,2006
- 如何在页面底部保持页脚 - 由马修詹姆斯泰勒,2007年
- 将页脚贴在页面的底部 - 作者:Ryan Fait,2007
- 精制版Ryan Fait的Sticky Footer - 作者:Chris Coyier,2009年
- 粘性CSS页脚:灵活的方式 (使用CSS表格) - 由Torben Haase,2011年
- 响应粘性页脚 (Torben的方法的精制版) - 由约书亚库克,2013年
- 由Flexbox的Sticky Footer 解决 - 由Philip Walton撰写,2013年
粘滞页脚
在这个答案中,我会选择Ryan Fait的方法,因为它简单易懂,也符合您的需求(页眉和页脚都有固定高度的情况).
考虑以下结构:
<div id="content"> <!-- content goes here. It may (not) include the header --> </div>
<div id="footer">Footer</div>
需要以下步骤:
设置
height的<html>并<body>以元素100%这是需要的下一步骤1.我们需要做的最重要的事情是确保它
#content足够高以推动#footer页面向下.因此,我们给出#content一个min-height的100%.到目前为止,
#content已经占据100%了视口的高度,因此我们应该向上拉页脚以将其定位在页面的底部.为了做到这一点,我们可以给出#content一个margin-bottom与页脚相对应的负数height.另外为了确保页脚出现在内容的顶部,我们应该position是页脚relative.在这里演示.可以看出,当
#content内容增长时,一些内容会在页脚后面.我们可以通过在末尾附加一个spacer元素来避免这种情况,也可以#content使用在IE8上支持的2padding-bottom和2的组合.box-sizing: border-box
4.1添加垫片
<div id="content">
<!-- content goes here -->
<div class="spacer"></div>
</div>
<div id="footer">Footer</div>
.spacer, #footer { height: 100px; }
4.2 padding-bottom和的组合box-sizing
#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如下:
(示例这里)
Run Code Online (Sandbox Code Playgroud)<div id="content"> <div id="header">Header</div> ...但如果它应该绝对定位3,我们需要
#content向下推动元素的内容以防止重叠.
因此,再一次,我们可以在#content(示例这里)的开头添加一个spacer :
<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;
}
更新示例 (请注意,由于简洁,省略了供应商前缀)
最后但并非不重要!
如今,所有主流的现代网络浏览器都支持box-sizing: border-box声明(包括IE8).但是,如果您正在寻找具有更广泛浏览器支持的传统方式,请坚持使用spacer元素.
1.这需要min-height: 100%在#content元素上进行处理(因为百分比值是相对于由height包含块构成的包含块<body>).还<html>应该有一个明确的height做出height: 100%去努力<body>.
2. box-sizing: border-box使UAs计算包含填充和边框的框的width/ height.
3. 根据规范,绝对定位元件是具有元素position的absolute或fixed.
- 出色的解释 (3认同)