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

【问题标题】：Force <div></div> to the bottom of the web page centered强制 <div></div> 到网页底部居中
【发布时间】：2010-10-05 12:08:09
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css ajax

【解决方案1】：

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

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

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

@Josh：不，这不是 Blankman 想要的，他想要一个贴在文档底部而不是视口（浏览器窗口）底部的页脚。因此，如果内容比浏览器窗口短，页脚会粘在窗口的下端，如果内容较长，页脚会向下，直到您向下滚动时才可见。

Twitter 引导实现

我看到很多人询问如何将其与 Twitter Bootstrap 结合使用。虽然很容易弄清楚，但这里有一些 sn-ps 应该会有所帮助。

// _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>

【讨论】：

页脚是否始终可见？无论滚动位置如何？

【解决方案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;
  }

【讨论】：

Josh，这种技术是否存在跨浏览器问题？
嗯，我知道IE6不支持固定定位。但我在 IE7 和 FF2 中尝试过，效果很好。
@Hector 我想知道添加 position:relative to body 是否可以解决这个问题
position:relative 使它不会粘在底部。

【解决方案3】：

我只是想清楚你在这里所说的话：

网页底部（文档，而不是视口）

根据您的布局，一个 div 将自然地位于“文档”的底部。

如果它没有到文档的底部，或者没有注意你的列有多高，是因为你的浮动吗？明确：两者；将是为了解决这个问题。

粘性页脚是我认为您要寻找的，但是当您说文档而不是视口时，我有点困惑。粘性页脚通常这样做：注意短页面，如果它比视口短，粘性页脚会将页脚 div 固定到底部。

这是一些粘性页脚（有数以百万计的 em，但这是我最喜欢的顺序）：

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

-肯

【讨论】：

我认为他刚刚提到，如果文档比视口长，则在滚动到最后之前页脚不应显示。这是一个粘性页脚。使用绝对位置，您会得到一个粘滞的视口页脚，在大多数情况下很难看。

【解决方案4】：

试试这个：Fixed footers without Javascript。我不知道它是否会完美契合，但我认为它已经足够接近了。

【讨论】：

在为我调整浏览器大小时不起作用。否则看起来不错 - 捕捉到文档的底部，或者，如果文档不滚动，则捕捉到视口的底部（而不仅仅是浮动）。

【解决方案5】：

你可以给 div 一个：

清除：两者；文本对齐：居中；

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

【讨论】：

【解决方案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 一个负左边距，等于其宽度的一半。

【讨论】：

-1 因为它谈论视口，这不是他想要的！