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

Posted 2023-03-06

技术标签:

【中文标题】如何将我的 div 放在其容器的底部？【英文标题】：How can I position my div at the bottom of its container? 【发布时间】：2010-10-06 06:39:46 【问题描述】：

给定以下 html：

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

我希望#copyright 贴在#container 的底部。我可以在不使用绝对定位的情况下实现这一点吗？

【问题讨论】：

这种情况是布局表还没有消失的原因之一。用一张桌子做这件事非常简单，而且在任何地方都可以使用。在 CSS 中执行此操作非常困难，并且跨浏览器支持也是如此。更不用说不可能记住如何正确地做。我不明白这个问题。为什么你需要使用绝对定位？容器是否有固定高度，不管它包含什么内容？ 【参考方案1】：

可能不会。

将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>

【讨论】：

如果容器上的 position:relative 破坏了您的设计，请记住，您可以在容器内包含一个 100% 高度的包装 div，然后添加 position:relative 代替。如果它是用于重复元素，否则它们会被放置在彼此之上？这还不算接近。它位于最近浏览器可见屏幕的底部，但我不知道有一个会位于容器 div 的底部。一个绝对定位的元素会寻找它最近的绝对或相对位置的父元素以确定它的位置。如果一切都失败了，它会求助于正文（窗口）。因此，父母需要是相对的。在#container 中添加margin-bottom 以防止页面内容受到版权保护【参考方案2】：

执行此操作的最常见方法是演示的“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 应该让我们的生活更轻松——总的来说，它确实如此——但事实是，即使经过这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。不完整。

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

【讨论】：

对我来说似乎是最好的答案。此外，您始终可以使用“css 表格”（显示：table[-row/-cell]）而不是 html 表格。这提供了没有语义的相同布局。如果你有一个 php 脚本/其他脚本来生成你的页面，你可以复制你的页脚，使用一个作为隐藏的“间隔”，一个绝对定位。间隔页脚可确保无论页脚中有多少内容，它都不会出现在页面上。对于阅读这些 cmets 的其他人：这与“骄傲”或“酷”无关。使用表格进行布局实际上更加痛苦，尤其是对于大量内容。确保你不会错过任何一个 td 并在添加内容时筛选这么多不相关的标记是地狱。这很痛苦，因为我们正在创建 HTML 文档而不仅仅是布局，如果我们文档的大部分内容不是表格数据，那我们为什么要把它放在表格中呢？如果我们不喜欢按原样使用网络技术，那么为什么要使用它们呢？改用桌面/移动应用发布内容骄傲无关紧要。由于可访问性原因，表格不应用于布局。如果您曾经使用过屏幕阅读器，您就会知道为什么表格应该只用于表格数据。使用 css 表作为 @chiccodoro 状态。使用表格进行布局并不是网络最佳实践。 HTML 用于语义定义，而不是用于样式。表格用于表格数据。布局和样式最好留给 CSS。【参考方案3】：

弹性盒方法！

在supported browsers 中，您可以使用以下内容：

Example Here

.parent 
  display: flex;
  flex-direction: column;

.child 
  margin-top: auto;

.parent 
  height: 100px;
  border: 5px solid #000;
  display: flex;
  flex-direction: column;

.child 
  height: 40px;
  width: 100%;
  background: #f00;
  margin-top: auto;

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

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

Example Here

.parent 
  display: flex;

.child 
  align-self: flex-end;

.parent 
  height: 100px;
  border: 5px solid #000;
  display: flex;

.child 
  height: 40px;
  width: 100%;
  background: #f00;
  align-self: flex-end;

<div class="parent">
  <div class="child">Align to the bottom</div>
</div>

附带说明，您可能需要添加供应商前缀以获得额外支持。

【讨论】：

父级上的column-reverse 怎么样，所以您根本不需要向子级添加任何内容？有没有办法覆盖子容器？如果您想显示一个在搜索过程中不应更改页面布局的搜索结果框。 IMO 这是最好的解决方案。绝对定位感觉很hacky。谢谢！在以下情况下它对我很有用：***.com/questions/69714133【参考方案4】：

是的您可以在不使用 absolute 定位和不使用 tables（与标记等）的情况下执行此操作。

DEMO 这已经过测试，可以在 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;

它有效地做了float:bottom 会做的事情，甚至考虑到@Rick Reilly 的回答中指出的问题！

【讨论】：

不错！请注意，IIRC 您需要设置 <!DOCTYPE> 才能使其在 IE 上运行（至少 display:table-XXX。但是标准模式也会破坏很多为 IE6 设计的页面。你也可以使用 flexbox - ***.com/questions/526035/… 我发现.footdisplay: table-footer-group 更幸运。我不需要vertical-align、height 或border-collapse。如果#container 只包含#foot 而没有其他内容，这是否可行？看来至少需要non-breaking space, @Solace【参考方案5】：

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

纯CSS，无绝对定位，无固定高度，跨浏览器（IE9+）

查看Working Fiddle

因为正常的流程是“从上到下”，我们不能简单地要求#copyright div 在没有某种绝对定位的情况下坚持到他父母的底部，但是如果我们想要#copyright div坚持他的父母，这会很简单——因为这是正常的流动方式。

所以我们将利用它来发挥我们的优势。我们将更改 HTML 中divs 的顺序，现在#copyright div 位于顶部，内容立即跟随它。我们还让内容 div 一直拉伸（使用伪元素和清除技术）

现在只需在视图中反转该顺序即可。这可以通过 CSS 转换轻松完成。

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

如果我们想在内容区域内有一个滚动条，我们需要应用更多的 CSS 魔法。如Here所示[在该示例中，内容位于标题下方-但其想法相同]

* 
  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>

【讨论】：

请不要，看看现在的渲染有多糟糕i.stack.imgur.com/ZP9Hw.png【参考方案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>

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：

试试这个；

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

【讨论】：

@Feelsbadman 请不要在这样的答案中更改其他人的代码。如果您打算将 CSS 从 HTML 中分离出来，请注意您无意中将代码更改为其他内容，这可能会使答案无效，并且肯定会改变发帖人的意图。【参考方案9】：

虽然此处提供的答案似乎都不适用或不适用于我的特定情况，但我遇到了this article，它提供了这个简洁的解决方案：

#container 
  display: table;


#copyright 
  display: table-footer-group;

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

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

【讨论】：

【参考方案10】：

如果您知道#container 的height 使用inline-block 元素的文本对齐 功能，您确实可以align 框到bottom 而不使用position:absolute .

Here你可以看到它的实际效果。

这是代码：

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

【讨论】：

【参考方案11】：

使用 translateY 和 top 属性

只需将元素子元素设置为位置：相对，然后将其移动到顶部：100%（即父元素的 100% 高度）并通过变换坚持到父元素的底部：translateY(-100%)（即 -100%孩子的身高）。

好处

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

但仍然只是解决方法:(

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

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

【讨论】：

【参考方案12】：

CodePen link here.

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>

【讨论】：

【参考方案13】：

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

您能详细说明您的问题吗？准确解释您要做什么（以及为什么不想使用绝对定位）？

【讨论】：

【参考方案14】：

如果不知道子块的高度：

#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>

【讨论】：

【参考方案15】：

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

【讨论】：

【参考方案16】：

 #containerwidth:100%; float:left; position:relative;
#copyrightposition:absolute; bottom:0px; left:0px; background:#F00; width:100%;
#containerbackground: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>

【讨论】：

【参考方案17】：

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

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

<!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>

【讨论】：

【参考方案18】：

也许这对某人有帮助：您始终可以将 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>

【讨论】：

【参考方案19】：

不想在底部使用“位置：绝对”作为粘性页脚。然后你可以这样做：

 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>

【讨论】：

你好尼莱什；该解决方案已在多个答案中提供。请务必在提供新问题之前阅读问题的所有个现有答案，以确保内容没有重复！【参考方案20】：

针对这种特定场景的解决方案：

将 inner 放在 parent 的底部。父级的高度由其“最高”兄弟的高度设置

设置：

我有一排有多个<div class="container"> 这些<div class="container"> 在另一个<div class="supercontainer"> 中彼此相邻每个 <div class="container"> 有 3 个相互重叠的内部 div：<div class="title">、<div class="content">、<div class="footer">

想要的结果：

所有<div class="container"> 具有相同的高度。高度没有以 px 为单位定义，它将是其中“最高”的高度。 <div class="title"> 应该在 <div class="container"> 的顶部 <div class="content"> 应放在<div class="title"> 下方 <div class="footer"> 应放在<div class="container"> 的底部，不与前面的内容重叠

这是当前状态：https://codepen.io/xavier-atero/pen/ExvWQww

.supercontainer 
  border: solid 1px black;
  display: flex;


.container, .other-container 
  position: relative;
  border: solid 1px red;
  width: 200px;
  margin: 10px;


.title 
  margin: 10px;
  border: solid 1px blue;


.content 
  margin: 10px;  
  border: solid 1px cyan;


.footer 
  margin: 10px;
  background: lime;

<body>
  <div class="supercontainer">
    <div class="container"> 
      <div class="title">
        This part represents the title and it is placed on top
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
    <div class="other-container"> 
      <div class="title">
        This part represents the title and it is placed on top.
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
  </div>
</body>

__________ 使用 FLEXBOX 的解决方案 __________

这是结果：https://codepen.io/xavier-atero/pen/MWvpBMz

.supercontainer 
  border: solid 1px black;
  display: flex;


.container, .other-container 
  position: relative;
  border: solid 1px red;
  width: 200px;
  margin: 10px;
  display: flex;
  flex-direction: column;


.title 
  margin: 10px;
  border: solid 1px blue;


.content 
  margin: 10px;  
  border: solid 1px cyan;


.footer 
  margin: 10px;
  background: lime;
  margin-top: auto;
  border: solid 1px fuchsia;

<body>
  <div class="supercontainer">
    <div class="container"> 
      <div class="title">
        This part represents the title and it is placed on top
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
    <div class="other-container"> 
      <div class="title">
        This part represents the title and it is placed on top.
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
  </div>
</body>

__________ 使用 TABLE-ROW 解决方案 __________

这是结果：https://codepen.io/xavier-atero/pen/rNzyKJm

.supercontainer 
  border: solid 1px black;
  display: flex;


.container, .other-container 
  position: relative;
  border: solid 1px red;
  width: 200px;
  margin: 10px;
  border-collapse:collapse;
  display : table;


.title 
  margin: 10px;
  border: solid 1px blue;


.content 
  margin: 10px;  
  border: solid 1px cyan;


.footer 
  margin: 10px;
  background: lime;
  border: solid 1px fuchsia;
  display: table-row;
  vertical-align: bottom;
  height: 1px;

<body>
  <div class="supercontainer">
    <div class="container"> 
      <div class="title">
        This part represents the title and it is placed on top
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
    <div class="other-container"> 
      <div class="title">
        This part represents the title and it is placed on top.
      </div> 
      <div class="content">
        This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged.
      </div> 
      <div class="footer"> 
        And this one is the footer. It should always be at the bottom of the container
      </div>
    </div>
  </div>
</body>

【讨论】：

【参考方案21】：

仅仅因为根本没有提到这一点，通常在像你这样的情况下效果很好：

将 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 声明为 height:100% 时，用户需要向下滚动才能查看版权。但即使您仍然可以解决（例如margin-top:-20px - 当您的版权元素的高度为 20 像素时）。

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

旁白：我知道 OP 要求解决方案 "... 粘在 'container' div 的底部..."，而不是它下面的东西，但是来吧，人们正在这里寻找好的解决方案，这就是其中之一！

【讨论】：

在 OP 的情况下，此解决方案仅在 #copyright 为固定高度时才有效（然后您可以设置 margin-top: -element height。 @Gajus：这不是绝对的，也不是固定的定位。这正是 OP 想要的（无论版权高度如何），唯一的例外是版权 div 不在第一个容器中。 OP 要求将版权粘贴在容器底部，而不是页面！对不起，我的意思是如果#container 的容器是固定高度的。除非我自己弄错了，否则 OP 试图解决的真正问题是当元素高度由另一个元素决定时元素的底部，例如 cmets jsbin.com/acoVevI/3。在这里，您不能简单地将按钮放在容器之外。要进一步说明该问题，请参阅jsbin.com/acoVevI/4。 OP 说：“我希望#copyright 坚持到#container 的底部。”所以从问题中这点并不完全清楚。此外，对于任何应该“坚持到#container 底部”的情况，这都是一个有效的示例。这个解决方案应该很有帮助，有一个干净的方法并且适用于许多布局。例如。任何带有滚动内容的页面，例如 ***.com ;-)【参考方案22】：

在 CSS 中没有名为 float:bottom 的东西。在这种情况下，最好的方法是使用定位：

position:absolute;
bottom:0;

【讨论】：

请解释你的答案。【参考方案23】：

对于那些在容器中只有一个子元素的容器，您可以使用 table-cell 和 vertical-align 方法，它们可以可靠地将单个 div 定位在其父元素的底部。

请注意，使用table-footer-group 作为提到的其他答案会破坏父级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>

【讨论】：

【参考方案24】：

您可以通过将可用空间分配给顶部的内容来使用网格：

 #container 
    display: grid;
    grid-template-rows: 1fr auto;
    height: 10rem; /* or 100% or anything */

<div id="container">
  This is random content.
  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

【讨论】：

【参考方案25】：

根据：w3schools.com

具有位置的元素：绝对；相对于最近定位的祖先（而不是相对于视口，就像固定的一样）。

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

【讨论】：

这已经在接受的答案中提到（等等）。

以上是关于如何将我的 div 放在其容器的底部？的主要内容，如果未能解决你的问题，请参考以下文章

如何将DIV对准其容器的底部？

如何将我的移动视图放在容器流体中，将桌面站点放在容器中？

如何防止 div 文本掉到容器底部？

如何将图像放在容器中间，底部有两个按钮

如何将按钮的底部边框（白色）放在包含 div 的底部边框上

如何将我的两个 <div> 放在同一个对齐上？ [复制]