使用Bootstrap停靠页脚
sme*_*eeb 2 html css footer sticky-footer twitter-bootstrap
假设我的页面应该是以下"模板":
我的页面由标题,内容部分(每页不同)和页脚组成.页面高度是标题高度+内容高度+页脚高度.注意页脚的高度; 它很高/很健壮.我很好.
我不想要一个"粘性"页脚,而是我正在寻找以下功能:
- 如果标题高度+内容高度大于视口/窗口高度,我不希望页脚在用户向下滚动到它之前可见(正常的页脚行为); 但...
- 如果页眉高度+内容高度+页脚高度小于视口/窗口高度,我希望页脚固定到视口底部.这意味着如果特定页面的内容非常小或者甚至是完全空的,我希望我的标题固定在窗口的顶部,并且页脚固定在底部.
jsFiddle中的示例
我需要做些什么才能改变我的footerdiv以展示所需的行为？
<!-- What needs to change here? -->
<div class="footer ">
This should always be shown at the bottom if there isn't a lot of content to display below the header.
</div>
我认为粘性页脚正是你想要的(只是不是fixed页脚)
直接从维基上获取粘性页脚:
Sticky Footer是一种CSS技术,用于将页脚部分锚定到页面底部,而不管页面的高度如何.当页面高度小于视口时,粘滞页脚将位于视口的底部,当页面高度大于视口时,粘滞页脚将位于页面的底部.
这是规范的Sticky Footer实现:http:
//ryanfait.com/html5-sticky-footer/
这是一个简单的例子:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
.footer {
background: yellow;
}
如果你想使用bootstrap,只需添加bootstrap CSS和你想要的任何其他类
Plunker中的简单演示
Plunker中的Bootstrap演示
