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

给定以下HTML:

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

当前回答

是的，你可以在没有绝对定位的情况下做到这一点，也可以不使用表(这与标记有关)。

演示这是经过测试的工作在IE>7, chrome, FF &是一个非常容易添加到您现有的布局。

<div id="container">
    Some content you don't want affected by the "bottom floating" div
    <div>supports not just text</div>

    <div class="foot">
        Some other content you want kept to the bottom
        <div>this is in a div</div>
    </div>
</div>

#container {
    height:100%;
    border-collapse:collapse;
    display : table;
}

.foot {
    display : table-row;
    vertical-align : bottom;
    height : 1px;
}

它有效地做了浮动:底部会做的事情，甚至解释了@Rick Reilly的回答中指出的问题!

2013-10-01 07:16:53

其他回答

为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面，就像使用相对定位(bottom:0px;)的情况一样。

2013-07-11 16:13:00

不要在底部使用"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

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

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

2009-02-08 17:12:05

下面是一种方法，目的是使具有已知高度和宽度(至少大约)的元素浮到右边并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将它放置在任何其他角落。

我需要制作一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身适当拉伸，而不破坏布局。我使用了一个“shadow”元素来占据导航栏的链接空间，并将其添加到容器子节点的末尾。

<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>

2013-08-30 05:46:55

2016-05-19 07:01:57

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

推荐文章

最新文章

标签