Question

我的HTML中有一个<div>...</div>部分，基本上就像一个工具栏。

有没有办法可以将该部分强制到网页底部（文档，而不是视口）并将其居中？

Answer 1

我认为您正在寻找的是：http://ryanfait.com/sticky-footer/

这是一个优雅的，仅限CSS 的解决方案！

我使用它，它适用于所有浏览器中的各种布局！就我而言，它是唯一适用于所有浏览器和布局的优雅解决方案。

@Josh：不，不是这就是布兰克曼想要的，他想要一个贴在文档底部的页脚，而不是视口（浏览器窗口）。因此，如果内容比浏览器窗口短，则页脚会粘到窗口的下端，如果内容较长，则页脚会向下并且在向下滚动之前不可见。

Twitter Bootstrap实施

我见过很多人都在问这可以和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>

Answer 2

如果我理解正确，无论垂直滚动位置如何，您都希望工具栏 始终可见。如果这是正确的，我会推荐以下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;
  }

Answer 3

我只想清楚你在这里说些什么：

网页的底部（文档，而非视口）

当然，div会位于“文档”的底部，具体取决于您的布局。

如果不是文档的底部，或者没注意列的高度，是不是因为你的浮动？明确：两者;是为了解决这个问题。

粘性页脚是我认为你想要的，但当你说文档而不是视口时，我有点困惑。粘性页脚通常会这样做：观察短页，如果它比视口短，粘性页脚将页脚div固定在底部。

这里有一些粘性的页脚（有很多人，但这是我最喜欢的）：

http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ （之前列出）
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ （有一个我找不到它）

也许如果你快速插图或者更具体地说明你想要什么？希望这会有所帮助：D

-Ken

Answer 4

试试这个：Fixed footers without Javascript。我不知道它是否合适，但我认为它足够接近。

Answer 5

你可以给div一个：

清除：两者;文本对齐：中心;

并将div作为结束体语句之前的最后一个元素。这将迫使它成为最后一个没有任何东西的元素。

Answer 6

您最好的选择是使用javascript来确定您网页的大小。您可以使用带有非IE浏览器的window.innerHeight和带有IE的document.documentElement.clientHeight获取高度。使用该值，您应该能够将页面设置顶部的元素绝对定位到该值减去div的高度。如果div的高度是可变的，则需要检查div的offsetHeight属性以获得实际高度。

对于居中使用以下示例：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            .wrapper
            {
                width: 100%;
                padding-left: 50%;
            }
            .test
            {
                width: 400px;
                margin-left: -200px;
                border: 1px solid black;
                padding-left: -200px;
            }
        </style>
    </head>
    <div class="wrapper">
    <div class="test">This is a test</div>
    </div>
 </html>

你想要居中的div周围有一个包装div。包装div的宽度为100％，内部div的宽度设置为您想要的宽度。给包装器div一个50％的左边距，内部div的左边距为负，等于其宽度的一半。

强制<div> </div>到网页底部居中

6 个答案:

Twitter Bootstrap实施