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

给定以下HTML:

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

当前回答

代码依赖链接在这里。

html, body { width: 100%; height: 100%; } .overlay { min-height: 100%; position: relative; } .container { width: 900px; position: relative; padding-bottom: 50px; } .height { width: 900px; height: 50px; } .footer { width: 900px; height: 50px; position: absolute; bottom: 0; } <div class="overlay"> <div class="container"> <div class="height"> content </div> </div> <div class="footer"> footer </div> </div>

2013-07-11 15:38:27

其他回答

如果你不知道子块的高度:

#{母公司背景:绿色; 宽度:200 px; 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ .child { 背景:红色; vertical-align:底部; ｝ < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >

http://jsbin.com/ULUXIFon/3/edit

如果你知道子块的高度，添加子块，然后添加padding-top/margin-top:

#{母公司背景:绿色; 宽度:200 px; 身高:130 px; padding-top: 70 px; ｝ .child { 背景:红色; vertical-align: 底; 身高:130 px; ｝ < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >

2014-01-06 08:22:34

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

我需要制作一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身适当拉伸，而不破坏布局。我使用了一个“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

使用translateY和top属性

只需将子元素设置为position: relative，然后将其移动到顶部:100%(这是父元素的100%高度)，并通过transform: translateY(-100%)(这是子元素高度的-100%)坚持到父元素的底部。

好处

您不需要从页面流中获取元素它是动态的

但仍然需要变通:(

.copyright{
   position: relative;
   top: 100%;
   transform: translateY(-100%);
}

不要忘记旧浏览器的前缀。

2015-08-21 08:58:49

CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位:

position:absolute;
bottom:0;

2013-05-20 14:14:26

你可以通过为顶部的内容分配可用空间来使用网格:

2021-12-03 18:44:27

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

推荐文章

最新文章

标签