我如何能定位我的div在其容器的底部?

给定以下HTML:

我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?

当前回答

如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位是要走的路。当然，如果版权元素是容器中的最后一个，它将始终位于底部。

你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?

2009-02-08 17:12:05

其他回答

也许这对某些人有帮助:你可以总是把一个div放在另一个div的外面，然后用负边距把它往上推:

<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
  Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
  Copyright Foo web designs
</div>

2014-04-03 08:51:59

如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位是要走的路。当然，如果版权元素是容器中的最后一个，它将始终位于底部。

你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?

2009-02-08 17:12:05

不要在底部使用"position:absolute"作为粘性页脚。那么你可以这样做:

html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body>  <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>

2019-10-31 11:23:30

正因为这一点根本没有被提及，在你这种情况下通常有效的方法是:

将copyright-div放在container-div之后

您只需要以与其他容器类似的方式格式化copyright-div(相同的整体宽度、居中等)，就可以了。

CSS:

#container, #copyright {
    width: 1000px;
    margin:0 auto;
}

HTML:

<div id="container">
    <!-- Other elements here -->
</div>

<div id="copyright">
    Copyright Foo web designs
</div>

唯一不理想的情况是当container-div声明高度为:100%时，用户需要向下滚动以查看版权。但即使如此，你仍然可以修改(例如margin-top:-20px -当你的版权元素的高度是20px)。

没有绝对定位没有表格布局没有疯狂的css，其他浏览器看起来都不一样(至少IE是这样) 简单明了的格式

旁白:我知道OP要求的解决方案是“……粘在“容器”div的底部…”，而不是下面的东西，但拜托，人们在这里寻找好的解决方案，这就是一个!

2013-06-13 08:28:48

2016-05-19 07:01:57

我如何能定位我的div在其容器的底部?

推荐文章

最新文章

标签