Bla*_*man 8 html javascript css ajax
<div>...</div>我的HTML中有一个部分基本上就像一个工具栏.
有没有办法可以将该部分强制到网页的底部(文档,而不是视口)并将其居中？
mar*_*kus 16
我想你要找的是:http://ryanfait.com/sticky-footer/
这是一款优雅的CSS解决方案!
我使用它,它适用于所有浏览器中的各种布局!就我而言,它是唯一适用于所有浏览器和布局的优雅解决方案.
@Josh:不,不是这就是布兰克曼想要的,他想要一个贴在文档底部的页脚,而不是视口(浏览器窗口).因此,如果内容比浏览器窗口短,则页脚会粘到窗口的下端,如果内容较长,则页脚会向下并且在向下滚动之前不可见.
我见过很多人都在问这可以和Twitter Bootstrap结合使用.虽然很容易理解,但这里有一些应该有用的片段.
// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}
.push {
height: $footerHeight;
}
.wrapper > .container {
padding-top: $navbarHeight + $gridGutterWidth;
}
@media (max-width: 480px) {
.push {
height: $topFooterHeight !important;
}
.wrapper {
margin: 0 auto -1*($topFooterHeight + 2) !important;
}
}
粗糙的标记体:
<body>
<div class="navbar navbar-fixed-top">
// navbar content
</div>
<div class="wrapper">
<div class="container">
// main content with your grids, etc.
</div>
<div class="push"><!--//--></div>
</div>
<footer class="footer">
// footer content
</footer>
</body>
如果我理解正确的话,你想要的工具栏来始终是可见的,不论垂直滚动页面的位置.如果这是正确的,我会推荐以下CSS ...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}