力＆LT; DIV＆GT;＆LT; / DIV＆GT;的网页的中心底部 [英] Force <div></div> to the bottom of the web page centered
问题描述
我有一个＆LT; DIV＆GT; ...＆LT; / DIV＆GT; 在我的HTML部分，基本上是像一个工具栏
I have a <div>...</div> section in my HTML that is basically like a toolbar.
有没有一种方法，我可以强制将部分网页（文档，而不是视区）和中心的底部呢？
Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?
推荐答案
我想你要找的东西是这样的：的 http://ryanfait.com/sticky-footer/
I think what you're looking for is this: http://ryanfait.com/sticky-footer/
这是一个优雅， CSS仅解决方案！
It's an elegant, CSS only solution!
我用它和它的作品完美的各种布局，在所有的浏览器！就我而言，这是唯一优雅的解决方案，它与所有浏览器和布局工作。
I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.
@Josh：不，它不是，这就是Blankman想要的，他想要一个页脚那支视（浏览器窗口）中没有该文件的底部。因此，如果该含量比在浏览器窗口越短，页脚粘到窗的下端，如果内容较长，页脚下降和直到向下滚动是不可见的。
@Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.
我见过很多人问如何能与Twitter引导相结合。虽然很容易弄清楚，这里有一些片段，应该帮助。
I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.
// _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>
这篇关于力＆LT; DIV＆GT;＆LT; / DIV＆GT;的网页的中心底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
