CSS使HTML页脚保持在页面底部的最小高度，但不重叠页面我有以下页面(死链接)：http://www.workingstorage.com/Sample.htm)它有一个页脚，我不能让它坐在页面的底部。我想让脚当页面较短且屏幕未被填充时，请坚持到窗口底部，以及停留在文档的末尾，当有超过一个内容的屏幕(而不是重叠的内容)时，按照正常的方式向下移动。CSS是继承下来的，让我感到困惑；我似乎无法正确地更改它，使其在内容上设置一个最小的高度，或者使页脚移到底部。
3 回答
繁星淼淼
TA贡献1775条经验 获得超11个赞
100%min-height100%
#footer {
clear: both;
position: relative;
height: 200px;
margin-top: -200px;}
MMTTMM
TA贡献1869条经验 获得超4个赞
视图演示
::afterbodyabsolute
基本通用标记
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }
/* Trick: */
body {
position: relative;
}
body::after {
content: '';
display: block;
height: 50px; /* Set same as footer's height */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>
下面的方法允许动态页脚高度：
使用挠曲箱
html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }
/* Trick */
body{
display:flex;
flex-direction:column;
}
footer{
margin-top:auto;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>
使用表-布局
html,body { height: 100%; margin: 0; }
header {
height: 50px;
background: lightcyan;
}
footer {
height: 50px;
background: PapayaWhip;
}
/**** Trick: ****/
body {
display: table;
width: 100%;
}
footer {
display: table-row;
}
<body>
<header>Header</header>
<article>Content</article>
<footer>Footer</footer>
</body>
- 3 回答
- 0 关注
- 949 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消