动态粘性页脚代码,Css代码库,德仔网

代码语言

代码分类

【Css】动态粘性页脚

作者:艳双 / 发布于2016/11/8/ 644

粘性页脚要满足两个条件：

内容不超过 main body 的时候，页脚固定在页面底部
内容超过 main body 的时候，页脚跟在 main body 后面
/* 核心代码 */
.parent {
 display: table;
 height: 100%;
 width: 100%;
}
.main {
 height: 100%;
}
.footer {
 display: table-row;
 height:1px;
}
圣杯布局

/* 核心代码 */
.parent {
 display: table;
 table-layout: fixed;
}
.parent > div {
 display: table-cell;
}
.left,
.right {
 width: 200px;
}
元素两端对齐

/* 核心代码 */
.parent {
 display: table;
}
.parent > div {
 display: table-cell;
}
.left {
 text-align: left;
}
.right {
 text-align: right;
}

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

艳双贡献的其它代码(11)