如何让 div 浮动到其容器的底部？答案

【问题标题】：How do I get a div to float to the bottom of its container?如何让 div 浮动到其容器的底部？
【发布时间】：2010-09-23 15:25:57
【问题描述】：

我多次使用float:right（或left）在容器顶部浮动图像和插入框。现在，我需要将div 浮动到另一个div 的右下角，并使用float 获得的正常文本换行（仅在上方和左侧换行）。

我认为这一定相对容易，即使 float 没有 bottom 值，但我无法使用多种技术来做到这一点，并且除了使用绝对定位，但这并没有给出正确的自动换行行为。

我曾认为这将是一个非常常见的设计，但显然不是。如果没有人有任何建议，我将不得不将我的文本分成单独的框并手动对齐div，但这相当不稳定，我不想在需要它的每个页面上都这样做。

【问题讨论】：

我会尽快解决这个“浮到底部”的问题，只要我弄清楚如何让某些东西沉到顶部...... ;-)
@Shog9 结论：css 需要一个“sink”元素。
这里的大多数答案都忽略了文本环绕“沉没”元素的要求。但 Stu 的回答有效（使用 JQuery）。
我觉得没那么好笑，我想知道你是如何在现实生活中首先向右或向左浮动的......它完全是在 z 轴上浮动观点。
使用弹性盒 - stackoverflow.com/a/27812717/2680216

标签： html css css-float

【解决方案1】：

将父 div 设置为position: relative，然后将内部 div 设置为...

position: absolute; 
bottom: 0;

...你去吧:)

【讨论】：

是的，我认为这也是要走的路，但是当您将位置设置为绝对时，元素不再参与包含元素的布局，因此没有自动换行和文本底角被遮挡。
也许您可以使用浮动包含 div 与位置相对和绝对技术的组合。
将浮动设置为右侧，然后应用例如一个负的顶部相对位置，导致图像被推到该图像之前的容器中的文本渲染之前/下方。
position absolute 被提到是不可接受的解决方案，不幸的是
不。这行不通。它位于整个页面的底部。

【解决方案2】：

将 div 放入另一个 div 并将父 div 的样式设置为position:relative; 然后在子 div 上设置以下 CSS 属性：position:absolute; bottom:0;

【讨论】：

查看我对蒂莫西的评论。正如您在此处看到的：emsoft.ca/absolutebottomtest.html 自动换行不起作用。并且有些内容被遮挡了。
如果您不需要子 div 内的任何文本，这是完美的解决方案。

【解决方案3】：

在与各种技术斗争了几天之后，我不得不说这似乎是不可能的。即使使用 javascript（我不想这样做）似乎也不可能。

为那些可能不理解的人澄清一下 - 这就是我要寻找的内容：在出版中，布置插图（图片、表格、图形等）是很常见的，以便其底部与底部对齐块（或页面）的最后一行文本，文本以自然的方式围绕插入物在上方和右侧或左侧流动，具体取决于插入物位于页面的哪一侧。在 html/css 中，使用浮动样式将 inset 的顶部与块的顶部对齐是微不足道的，但令我惊讶的是，尽管它是一种常见的布局任务，但似乎不可能对齐文本的底部和 inset .

我想我必须重新审视这个项目的设计目标，除非有人在最后一刻提出建议。

【讨论】：

不——这不是印刷出版。有些事情仅使用 html/css 是非常困难或不可能完成的。
我知道这已经很老了高 flex-grow 量和我想要的容器浮动到底部就像简单地 flex-grow: 1. 当然增长方向需要是列。
@Alexandra 右下角的框是否像普通浮动一样将文本推到其角落？ “文本流”是OP的要求之一
我以前遇到过这样的问题，我使用 CSS 网格来解决这个问题。如果您附上了问题的可视化表示。在 CSS Grid 拯救我们的 11 年后，这个问题可能会得到回答。

【解决方案4】：

如果您可以只将文本的最底部一行放在块的一侧（而不是完全在它周围和下方，如果不结束块并开始一个新块，您就无法做到这一点） )，将块浮动到父块的底角之一并非不可能。如果您将一些内容放在块内的段落标签中，并希望将链接浮动到块的右下角，请将链接放在段落块内并将其设置为 float: right，然后放入带有 clear 的 div 标签: 都设置在段落标签的下方。最后一个 div 是为了确保父标签包围浮动标签。

<div class="article" style="display: block;">
    <h3>title</h3>
        <p>
            text content
            <a href="#" style="display: block;float: right;">Read More</a>
        </p>
    <div style="clear: both;"></div>
</div>

【讨论】：

【解决方案5】：

相当老的问题，但仍然...... 您可以像这样将 div 浮动到页面底部：

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

你可以看到魔法发生在哪里。我认为您可以将其浮动到父 div 的底部。

【讨论】：

不过，这不会环绕它的文本。后面会出现任何文字。
是的，这不是 CSS 意义上的“浮动”。它是“移动的”但不是浮动的。

【解决方案6】：

如果您需要相对对齐并且 DIV 仍然无法满足您的需求，只需使用表格并在您希望内容与底部对齐的单元格中设置 valign = "bottom"。我知道这不是您问题的好答案，因为 DIV 应该替换表格，但这是我最近对图像标题所做的事情，到目前为止它工作得完美无缺。

【讨论】：

【解决方案7】：

不确定，但如果您在子 div 上使用 position: relative 而不是 absolute。

#parent {
  width: 780px;
  height: 250px;
  background: yellow;
  border: solid 2px red;
}
#child {
  position: relative;
  height: 50px;
  width: 780px;
  top: 100%;
  margin-top: -50px;
  background: blue;
  border: solid 2px green;
}

<div id="parent">
    This has some text in it.

    <div id="child">
        This is just some text to show at the bottom of the page
    </div>
</div>

而且没有桌子......！

【讨论】：

【解决方案8】：

我在第一次尝试时通过将position:absolute; bottom:0; 添加到 CSS 中的 div ID 来实现此功能。我没有添加父样式position:relative;。

它在 Firefox 和 IE 8 中都能完美运行，还没有在 IE 7 中尝试过。

【讨论】：

【解决方案9】：

我也尝试过之前发布的这个场景；

div {
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

绝对定位在加载页面时将 div 固定到浏览器的最低部分，但是当页面较长时向下滚动时，它不会随您滚动。我将定位更改为相对，并且效果很好。加载时 div 会直接到达底部，因此在到达底部之前您不会真正看到它。

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

【讨论】：

有什么办法让它在未知高度下工作？不幸的是，保证金最高：-100%；指的是我猜的容器高度。

【解决方案10】：

这会在页面底部放置一个固定的 div，并在您向下滚动时固定到底部

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

【讨论】：

这并没有做他想做的事。 @Timoty 和 @Yona 做对了。

【解决方案11】：

我知道这东西很旧，但我最近遇到了这个问题。

使用绝对位置 divs 建议真的很愚蠢，因为整个浮动的东西在绝对位置上有点失去意义..

现在，我没有找到一个通用的解决方案，但在很多情况下，prople 使用浮动 div 只是为了连续显示一些东西，比如一系列 span 元素。你不能垂直对齐。

要达到类似的效果，您可以这样做：不要让 div 浮动，而是将其 display 属性设置为 inline-block。然后你可以垂直对齐它，但它会让你满意。您只需要将父级的 div 属性 vertical-align 设置为 top、bottom、middle 或 baseline

希望对大家有所帮助

【讨论】：

不知道这在常见情况下是否有效，但对于 jQueryMobile，它完全不起作用。
这正是将 div 对齐到底部或并排所需要的，非常有帮助

【解决方案12】：

另一种答案是明智地使用表格和行跨度。通过将前一行上的所有表格单元格（主要内容之一除外）设置为 rowspan="2"，您将始终在主表格单元格的底部获得一个单元格孔，您始终可以放置 valign="bottom"。

您还可以将其高度设置为一行所需的最小值。因此，无论其余文本占用多少空间，您总是会在底部找到您最喜欢的文本行。

我尝试了所有 div 答案，但无法让他们做我需要的事情。

<table>
<tr>
   <td valign="top">
     this is just some random text
     <br> that should be a couple of lines long and
     <br> is at the top of where we need the bottom tag line
   </td>
   <td rowspan="2">
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     this<br/>
     is really<br/>
     tall
  </td>
</tr>
<tr>
  <td valign="bottom">
      now this is the tagline we need on the bottom
  </td>
</tr>
</table>

【讨论】：

基于表格的设计在大多数 Web 开发人员中被认为是不好的做法。 CSS 是页面样式的首选，您可以以更加语义友好的方式完成相同的事情。
表格对多格式不太友好（打印、屏幕、移动），它们没有流向它们。只是提供一个替代方案。

【解决方案13】：

一种有趣的方法是将几个右浮动元素堆叠在一起。

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

唯一的问题是，这只有在您知道盒子的高度时才有效。

【讨论】：

【解决方案14】：

这是我的解决方案：

<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}

.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}

</style>

<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>

<div class="footer">
    <div class="bottom-element">bottom-element-in-sidebar</div>
</div>

【讨论】：

【解决方案15】：

我在 JQuery 中实现了这一点，方法是在浮动右侧上方放置一个零宽度的支柱元素，然后根据父高度减去浮动孩子的高度来调整支柱（或管道）的大小。

在 js 开始之前，我使用的是绝对位置方法，这种方法有效，但允许文本在后面流动。因此，我切换到静态位置以启用支撑方法。（header是父元素，cutout是我想要的右下角，pipe是我的支柱）

$("header .pipe").each(function(){
    $(this).next(".cutout").css("position","static");       
    $(this).height($(this).parent().height()-$(this).next(".cutout").height());                                                 
});

CSS

header{
    position: relative; 
}

header img.cutout{
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}
header .pipe{
    width:0px; 
    float:right

}

管道必须排在第一位，然后是切口，然后是 HTML 中的文本。

【讨论】：

这需要大量工作，并且使用 javascript 进行样式设置始终是最后的后备方案，因为如果您稍后更改 css，它很容易被搞砸。但是，是的，这确实有效，所以如果让该 div 在底部排列并带有自动换行至关重要：去吧。
这对我有用，但我无法准确。我想 .height() 可能是罪魁祸首。似乎当浮动块周围有很多块级文本（如多个 div 和段落）时，.height() 会根据文本的换行方式而有所变化。
我走了另一条路，检查了容器的宽度（标题）和我必须环绕的一段内容（徽标）并在绝对定位的内容上设置最大宽度（导航）。没有浮动，也没有额外的元素。仍然有 JS 并且取决于知道你需要环绕什么。
这行得通。请记住也将其设为窗口大小调整处理程序。而且我不得不手动减去内框的边距。

【解决方案16】：

要将任何元素放在其容器的底部，只需使用以下命令：

div {
    position: absolute;
    bottom: 0px;
}

【讨论】：

就是这样，它可能会出现在屏幕底部。父 div 也需要有 position: relative。

【解决方案17】：

Stu 的答案是迄今为止最接近工作的答案，但它仍然没有考虑到您的外部 div 的高度可能会根据文本在其中的换行方式而发生变化的事实。因此，仅重新定位内部 div（通过更改“管道”的高度）是不够的。这种变化必须发生在循环内，因此您可以不断检查您是否已经实现了正确的定位，并在需要时重新调整。

上一个答案中的 CSS 仍然完全有效：

#outer {
    position: relative; 
}

#inner {
    float:right;
    position:absolute;
    bottom:0;
    right:0;
    clear:right
}

.pipe {
    width:0px; 
    float:right

}

然而，Javascript 应该看起来更像这样：

var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {

    // Prevent endless loop
    i++;
    if (i > 5000) { break; }

    totalHeight = jQuery('#outer').outerHeight();
    innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
    if (innerBottom < totalHeight) {
        if (hadToReduce !== true) { 
            jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
        } else { break; }
    } else if (innerBottom > totalHeight) {
        jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
        hadToReduce = true;
    } else { break; }
}

【讨论】：

【解决方案18】：

使其工作的方法如下：

像往常一样向左浮动元素

使用

将父 div 旋转 180 度

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

JSfiddle：http://jsfiddle.net/wcneY/

现在将所有向左浮动的元素（给它们一个类）旋转 180 度，使它们再次变直。瞧！它们浮到底部。

【讨论】：

这是最好的解决方案，因为您可以保持内容的动态高度！谢谢
虽然这是一个了不起的解决方案，但它弄乱了我的 Firefox Nightly 开发者工具：div 选择器似乎忽略了旋转的 div 以及其中的所有内容。
无法在右下角的框周围换行：所有字母都颠倒过来，从下到上阅读（？）。 jsfiddle.net/xu8orw5L
这是魔鬼的作品，我立即使用它。
仅供参考，截至 2019 年，jsfiddle 在 Firefox 和 Chrome 中根本不再工作（即使您删除了前缀）。

【解决方案19】：

我只想做一张桌子。

<div class="elastic">
  <div class="elastic_col valign-bottom">
    bottom-aligned content.
  </div>
</div>

还有 CSS：

.elastic {
  display: table;
}
.elastic_col {
  display: table-cell;
}
.valign-bottom {
  vertical-align: bottom;
}

查看实际操作：
http://jsfiddle.net/mLphM/1/

【讨论】：

【解决方案20】：

我尝试了其中的几种技术，以下对我有用，所以如果所有其他方法都失败了，那么试试这个，因为它对我有用:)。

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

【讨论】：

【解决方案21】：

A 选择了@dave-kok 的这种方法。但它只有在整个内容都适合而不滚动的情况下才有效。如果有人会改进，我很感激

outer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.space {
    float: right;
    height: 75%;  
}
.floateable {
    width: 40%;
    height: 25%;
    float: right;
    clear: right;  
 }

这里是代码http://jsfiddle.net/d9t9joh2/

【讨论】：

【解决方案22】：

我知道这是一个非常古老的话题，但我仍然想回答。如果有人遵循下面的 css & html，那么它就可以工作。子页脚 div 会像胶水一样粘在底部。

<style>
        #MainDiv
        {
            height: 300px;
            width: 300px;
            background-color: Red;
            position: relative;
        }

        #footerDiv
        {
            height: 50px;
            width: 300px;
            background-color: green;
            float: right;
            position: absolute;
            bottom: 0px;
        }
    </style>


<div id="MainDiv">
     <div id="footerDiv">
     </div>
</div>

【讨论】：

【解决方案23】：

如果你想让文本很好地换行：-

.outer {
  display: table;
}

.inner {
  height: 200px;
  display: table-cell;
  vertical-align: bottom;
}

/* Just for styling */
.inner {
  background: #eee;
  padding: 0 20px;
}

<!-- Need two parent elements -->
<div class="outer">
  <div class="inner">
    <h3>Sample Heading</h3>
    <p>Sample Paragragh</p>
  </div>
</div>

【讨论】：

【解决方案24】：

简单......在html文件中......在底部有“页脚”（或底部的div）。所以不要这样做：

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

这样做：（下面有页脚。）

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

完成此操作后，您可以转到 css 文件并将“侧边栏”浮动到左侧。然后让“内容”向右浮动，然后让“页脚”都清除。

这应该对我有用。

【讨论】：

【解决方案25】：

随着Flexbox 的引入，这变得非常容易，无需太多黑客攻击。子元素上的align-self: flex-end 将沿cross-axis 对齐。

.container {
  display: flex;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

输出：

.container {
  display: flex;
  /* Material design shadow */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  height: 100px;
  width: 175px;
  padding: 10px;
  background: #fff;
  font-family: Roboto;
}
.bottom {
  align-self: flex-end;
}

<div class="container">
  <div class="bottom">Bottom of the container</div>
</div>

【讨论】：

你似乎没有仔细阅读这个问题。将它放在底部很容易，但这并不能提供所需的浮动行为。
我不能，因为很遗憾我没有答案，也看不到某事。否则答案有误，需要更正。
@Dennis98 我同意你的评论。这是该问题的错误答案。我们可以做什么？ :)

【解决方案26】：

现在这可以通过 flex box 实现。只需将父 div 的 'display' 设置为 'flex' 并将 'margin-top' 属性设置为 'auto' 即可。这不会扭曲两个 div 的任何属性。

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

【讨论】：

【解决方案27】：

如果将父元素设置为position:relative，则可以将子元素设置为底部设置position:absolute;和底部：0;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>

【讨论】：

【解决方案28】：

我也找到了这个解决方案很长时间了。这是我得到的：

对齐自我：flex-end;

链接：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我不记得我是从哪里打开这个链接的。希望对你有帮助

【讨论】：

【解决方案29】：

您可以尝试使用宽度为 1 像素的空元素并使其浮动。然后清除您实际要定位的元素并使用空元素的高度来控制它向下的距离。

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

【讨论】：

【解决方案30】：

使用 css margin-top 属性将页脚设置到其容器的底部。并使用 css text-align-last 属性将页脚内容设置在中心。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

【讨论】：