本文介绍了具有可变高度的粘滞页脚的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我知道有很多相同的主题,但是有没有任何CSS方式,以一个高度在%的底部,而不会溢出的身体和标题,因为绝对位置的底部?
I know there is a lot of same topics, but is there any CSS way to stick bottom a footer with an height in % without overflowing the body and the header because of absolute position ?
我试图坚持这一个:
html,body{
height: 100%;
}
#header{
background-color: yellow;
height: 100px;
width: 100%;
}
#holder {
min-height: 100%;
position:relative;
}
#body {
padding-bottom: 100px;
}
#footer{
background-color: lime;
bottom: 0;
height: 100%;
left: 0;
position: relative;
right: 0;
}
使用html:
<div id="holder">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
代码:
谢谢!
推荐答案
如果你使用display:table作为基础,那么你的粘性页脚可以是任何大小,如果内容增长就会被压下。
if you use display:table as a base , then your sticky footer can be any size and will be pushed down if content grows.
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
width:80%;
}
.tr {
display:table-row;
background:turquoise
}
section.tr {
height:100%;
background:yellow
}
<header class="tr"> <h1>title</h1><p>make me grow</p></header>
<section class="tr"><article>article</article></section>
<footer class="tr"> <p>Footer</p><p>make me grow</p></footer>
这篇关于具有可变高度的粘滞页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!