如何将div放置在其容器的底部？

740

鉴于以下HTML：

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
展开摘要

我想#copyright坚持到底#container。

不使用绝对定位就可以实现吗？如果float属性支持'bottom'的值，那似乎可以解决问题，但不幸的是，事实并非如此。

html  css 
— 多纳尔
source
211
这种情况是布局表尚未消失的原因之一。用桌子做到这一点非常简单，并且可以在任何地方使用。用CSS做到这一点非常困难，跨浏览器支持也是如此。更不用说记住正确的做法了。
— Tomalak
我不明白这个问题。为什么根本需要使用绝对定位？不管容器包含的内容如何，​​容器都有设定的高度吗？
— 哈特利圣

Answers:

920

可能不会。

分配position:relative给#container，然后分配position:absolute; bottom:0;给#copyright。

#container {
    position: relative;
}
#copyright {
    position: absolute;
    bottom: 0;
}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
展开摘要

— 用户
source
10
如果容器上的position：relative破坏了您的设计，请记住，您可以在容器内部以100％的高度包含一个wrapper div，然后向其添加position：relative。
— 杰克·谢泼德
是否用于重复元素，否则它们将位于彼此之上？
— CRice 2012年
6
绝对定位的元素将寻找其绝对位置或相对位置的最接近的父元素，以确定其位置。如果全部失败，则求助于正文（窗口）。因此，需要父母亲是相对的。
— user17753 2012年
1
在#container中添加一个底边，以防止对该页面内容进行版权保护
— Doc Kodam
1
下面的Flexbox方法要好得多。
— woohoo，
345

实际上，@ User接受的答案仅在窗口高且内容短时才起作用。但是，如果内容很高而窗口很短，则会将版权信息放在页面内容上，然后向下滚动以查看内容将给您留下浮动的版权声明。这使得该解决方案对大多数页面（实际上是该页面）无用。

最常见的方法是演示的“ CSS粘性页脚”方法，或者稍微更苗条的变体。如果您的页脚高度固定，则此方法效果很好。

如果您需要一个可变高度的页脚，如果内容太短，它将显示在窗口的底部；如果内容太短，将显示在内容的底部，该怎么办？

吞下自己的骄傲并使用桌子。

例如：

* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

#container {
    height: 100%;
    border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
    <table id="container">
        <tr>
            <td valign="top">
                <div id="main">Lorem ipsum, etc.</div>
            </td>
        </tr>
        <tr>
            <td valign="bottom">
                <div id="footer">Copyright some evil company...</div>
            </td>
        </tr>
    </table>
</body>
</html>
展开摘要

试试看。在任何浏览器甚至IE6上，它都适用于任何窗口大小，任何内容量，任何页脚。

如果您不愿意使用表格进行布局，请花一秒钟时间问自己为什么。CSS本来可以使我们的生活更轻松-并且总体上来说-但事实是，即使这些年来，它仍然是残破的，违反直觉的混乱。它不能解决所有问题。还不完整

表格不是很酷，但是至少就目前而言，它们有时是解决设计问题的最佳方法。

— 里克·赖利
source
80
似乎是对我最好的答案。此外，您始终可以使用“ css表”（显示：table [-row / -cell]）代替html表。这提供了没有语义的相同布局。
— chiccodoro 2012年
1
如果您有生成页面的PHP脚本/其他脚本，则可以复制页脚，将页脚用作隐藏的“空格”，而将其绝对定位。分隔页脚可确保无论页脚中包含多少内容，它都不会在页面上显示。
— Tyzoid
20
对于其他阅读这些评论的人：这与“骄傲”或“酷”无关。在实际中使用表格进行布局会更加痛苦，尤其是对于大量内容而言。确保您不会错过td并在添加内容时筛选太多无关紧要的标记真是太难了。这是一个痛苦的原因，因为我们不仅要创建HTML 文档，还需要创建布局，并且如果文档的大部分内容不是表格数据，那么为什么要将其放在表格中呢？如果我们不喜欢按原意使用网络技术，那为什么要使用它们呢？改用桌面/移动应用发布内容
— gabe
1
@chiccodoro我实现了一个无表等效项，这非常少，请在下面查看我的答案
— Hashbrown 2013年
59
骄傲是无关紧要的。由于可访问性原因，不应将表用于布局。如果您曾经使用过屏幕阅读器，那么您将知道为什么表格仅应用于表格数据。使用css表作为@chiccodoro状态。
— Matt Fellows 2013年
170

flexbox方法！

在受支持的浏览器中，可以使用以下各项：

这里的例子

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

显示代码段

上面的解决方案可能更灵活，但是，这是一个替代解决方案：

这里的例子

.parent {
  display: flex;
}
.child {
  align-self: flex-end;
}

显示代码段

附带说明，您可能需要添加供应商前缀以提供其他支持。

— 乔什·克罗泽（Josh Crozier）
source
3
怎么样column-reverse的父母，所以你不需要任何东西都加了孩子？
— Max Waterman
1
这可能应该是公认的答案-没有技巧，没有绝对的定位，在需要时溢出可以干净地工作（对我而言）。
— 副词
114

是的，您可以在不absolute定位且不使用tables（带有标记等的螺钉）的情况下执行此操作。

演示
这经测试可在IE> 7，chrome，FF和IE> 7上工作，并且非常容易添加到现有布局中。

<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;
}

它有效地做了什么float:bottom，甚至解决了@Rick Reilly的答案中指出的问题！

— 炸土豆饼
source
1
真好！请注意，IIRC您需要<!DOCTYPE>设置才能在IE上运行（至少<= 8）；那些旧版本仅display:table-XXX在“标准”模式下支持。但是标准模式也将破坏很多为IE6设计的页面。
— 大卫
3
您还可以使用Flexbox的- stackoverflow.com/questions/526035/...
— 乔希克罗泽
2
我发现更多的运气.foot{display: table-footer-group}。我并不需要vertical-align，height或者border-collapse。
— 雅各布·瓦伦塔
如果#container仅包含#foot这些内容而不包含其他内容，是否可以使用？
— 安慰
似乎至少需要一个不间断的空间，@Solace
— Hashbrown 2015年
20

这是一个古老的问题，但这是一种可以在某些情况下提供帮助的独特方法。

纯CSS，没有绝对定位，没有固定任何高度，跨浏览器（IE9 +）

查看工作小提琴

由于正常流程是“自上而下”的，我们不能简单地要求#copyrightdiv在没有绝对定位的情况下坚持其父辈的底部，但是，如果我们希望#copyrightdiv坚持其父辈的顶部，那会非常简单-因为这是正常的流程。

因此，我们将利用这一优势。我们将更改divHTML中s 的顺序，现在#copyrightdiv在顶部，并且内容立即跟随它。我们还使内容div一直延伸（使用伪元素和清除技术）

现在只需要在视图中反转顺序即可。使用CSS转换可以轻松完成。

我们将容器旋转180度，然后：向上-向下。（然后我们将内容取反以再次看起来正常）

如果我们希望在内容区域内有一个scroolbar，则需要应用更多CSS魔术。作为可呈这里 [在该示例中，内容是标题下方-但其同样的想法]

* {
  margin: 0;
  padding: 0;
}

html,
body,
#Container {
  height: 100%;
  color: white;
}

#Container:before {
  content: '';
  height: 100%;
  float: left;
}

#Copyright {
  background-color: green;
}

#Stretch {
  background-color: blue;
}

#Stretch:after {
  content: '';
  display: block;
  clear: both;
}

#Container,
#Container>div {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
<div id="Container">
  <div id="Copyright">
    Copyright Foo web designs
  </div>
  <div id="Stretch">
    <!-- Other elements here -->
    <div>Element 1</div>
    <div>Element 2</div>
  </div>
</div>
展开摘要

— 阿夫拉罕库尔
source
2
请不要，看看现在的渲染效果如何i.stack.imgur.com/ZP9Hw.png
— grg
7

div为上述元素创建另一个容器#copyright。在版权的正上方添加一个新内容div： <div style="clear:both;"></div> 它将迫使页脚位于其他所有内容的下方，就像使用相对定位（bottom:0px;）一样。

— 拉普利（RápliAndrás）
source
7

尝试这个;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

— 加里·格林
source
1
@Feelsbadman请不要在这样的答案中更改其他人的代码。如果您打算仅将CSS与HTML分开，请注意，您无意中将代码更改为其他内容，可能会使答案无效，并且肯定会更改张贴者的意图。
— TylerH，
6

尽管此处提供的答案似乎都不适用于我的特定情况，但我遇到了提供此整洁解决方案的这篇文章：

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

我发现这对于将响应式设计应用于移动显示非常有用，而无需重新排序网站的所有html代码， body而是自身为表格。

请注意，只有第一个table-footer-group或table-header-group会这样渲染：如果有多个，则其他将被渲染为table-row-group。

— Skippy le Grand Gourou
source
6

CSS网格

由于CSS Grid的使用在增加，因此我建议align-self网格容器中的元素。

align-self可以包含任何值：end，self-end，flex-end对于下面的例子。

#parent {
  display: grid;
}

#child1 {
  align-self: end;
}

/* Extra Styling for Snippet */

#parent {
  height: 150px;
  background: #5548B0;
  color: #fff;
  padding: 10px;
  font-family: sans-serif;
}

#child1 {
  height: 50px;
  width: 50px;
  background: #6A67CE;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
<div id="parent">
  <!-- Other elements here -->
  <div id="child1">
    1
  </div>

</div>
展开摘要

— 马诺·库玛（Manoj Kumar）
source
5

你可以确实align的方框bottom不使用position:absolute，如果你知道height的#container使用文本对齐方式的特点inline-block元素。

在这里您可以看到它的实际效果。

这是代码：

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}
— 杰克姆诺
source
5

使用translateY和top属性

只需将子元素的子元素设置为position：relative，然后将其移动到top：100％（即父对象的高度的100％），然后通过以下转换坚持到父对象的底部：translateY（-100％）（即子对象的高度的-100％孩子）。

好处

  • 你不从页面流中获取元素
  • 它是动态的

但仍然只是解决方法:(

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

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

— 萨缪尔
source
4

CodePen链接在这里。

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>
展开摘要

— 阿齐萨斯兰
source
3

如果您希望它“粘”在底部，而不管容器的高度如何，那么绝对定位是可行的方法。当然，如果版权元素是容器中的最后一个元素，则无论如何它将始终位于底部。

您能否扩展您的问题？确切说明您要做什么（以及为什么不想使用绝对定位）？

— 杰克·斯莱特
source
2

另外，如果有使用position:absolute;或的规定position:relative;，您可以随时尝试使用padding parent div或放置margin-top:x;。在大多数情况下，这不是一个很好的方法，但在某些情况下可能会派上用场。

— 幽灵回声
source
1

也许这对某人有帮助：您可以始终将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>
— 设计咨询
source
1 

 #container{width:100%; float:left; position:relative;}
#copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;}
#container{background:gray; height:100px;}
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
展开摘要

<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>
展开摘要

— 安莫尔·拉坦·莫拉（Anmol Ratan Mohla）
source
1

不想在底部使用“ 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>
    <!--HTML Code-->
    <div class="wrapper">
        <div class="content">content</div>
        <div class="push"></div>
    </div>
    <footer class="footer">test</footer>
</body>
</html>
展开摘要

— 尼罗什·帕瓦尔
source
你好尼罗什; 已经在多个答案中提供了该解决方案。在提供新的问题之前，请务必阅读所有问题的现有答案，以确保没有重复的内容！
— TylerH，
1

如果您不知道子块的高度：

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
展开摘要

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

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

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}
<div id="parent">
    <div class="child">child
    </div> 
</div>
展开摘要

— 左旋
source
0

只是因为根本没有提到它，所以在像您这样的情况下通常效果很好：

在容器div 之后放置版权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用声明时height:100%，用户需要向下滚动以查看版权。但是，即使您仍然可以解决问题（例如margin-top:-20px-当版权元素的高度为20px时）。

  • 无绝对定位
  • 无表格布局
  • 没有疯狂的CSS，在所有其他浏览器中看起来都不一样（至少IE，您知道）
  • 简单明了的格式

旁白：我知道OP要求一种解决方案“ ...坚持'container'div的底部...”，而不是解决方案，但继续吧，人们正在这里寻找良好的解决方案，而这是一个！

— 莱维特
source
在OP的情况下，该解决方案是唯一的好，如果#copyright固定高度（那么你可以设置margin-top: -{element height}。
— Gajus
@Gajus：这不是绝对的，也不是固定的定位。这完全符合OP的要求（不管版权高度如何），唯一的例外是copyright-div不在第一个容器中。OP要求将版权粘贴在容器的底部，而不是页面的底部！
— 2014年
抱歉，我的意思不是＃容器的容​​器是否固定高度。
— Gajus 2014年
除非我自己弄错，否则OP试图解决的真正问题是当元素高度由另一个元素决定时，例如，带有注释jsbin.com/acoVevI/3的元素的底部。在这里，您不能简单地将按钮放在容器外部。要进一步说明该问题，请参阅jsbin.com/acoVevI/4。
— Gajus 2014年
OP说：“我希望#copyright坚持在#container的底部。”，因此从问题上还不能完全清楚。此外，这对于仅应“粘贴在#container底部”的任何情况都是有效的示例。该解决方案应该会有所帮助，采用一种简洁的方法，并且适用于许多布局。例如，任何具有滚动内容的页面，例如stackoverflow.com ;-)
— Levite 2014年
0

这是一种方法，旨在使高度和宽度已知（至少近似）的元素向右浮动并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将其放置在其他任何角落。

我需要制作一个导航栏，该导航栏的右下角将有实际的链接，并包含随机的同级元素，同时确保导航栏本身可以正确拉伸，而不会破坏布局。我使用了一个“阴影”元素来占据导航栏链接的空间，并将其添加到容器的子节点的末尾。

<!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>
— Zyox
source
0

对于那些只有一个孩子的容器，您可以使用table-celland vertical-align方法，该方法可靠地将单个div放置在其父对象的底部。

请注意，将其table-footer-group用作其他答案将破坏parent的高度计算table。

#container {
    display: table;
    width: 100%;
    height: 200px;
}
#item {
    display: table-cell;
    vertical-align: bottom;
}
<div id="container">
    <div id="item">Single bottom item</div>
</div>
展开摘要

— 张海
source
0

根据：w3schools.com

位置为：绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

因此，您需要将父元素放置在相对或绝对位置等位置，并将所需元素放置在绝对位置，然后将底部设置为0。

— 乔纳斯·弗雷雷（Jonas Freire）
source
可接受的答案中已经提到了这一点。
— TylerH
-1

Div风格，position:absolute;bottom:5px;width:100%;正在工作，但是需要更多向上滚动的情况。

window.onscroll = function() {
    var v = document.getElementById("copyright");
    v.style.position = "fixed";
    v.style.bottom = "5px";
}
— 尼斯杰
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.