我如何让一个div浮动到其容器的底部?

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

position: absolute;
bottom: 0;

.．.就这样了。

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

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

为那些可能不理解的人澄清-这是我在寻找的:在出版中，很常见的布局一个插图(图片，表格，图表等)，使其底线与块(或页)的最后一行文本的底部对齐，文本以自然的方式围绕插图上方或右侧或左侧流动，这取决于插图在页面的哪一边。在html/css中，使用浮动样式将插入的顶部与块的顶部对齐是微不足道的，但令我惊讶的是，尽管这是一种常见的布局任务，但似乎不可能将文本和插入的底部对齐。

我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。

如果只允许文本最底部的一行移到块的一侧(而不是完全围绕在它的下面，如果不结束块并开始一个新的块就不能这样做)，那么将一个块浮动到父块的底角之一也不是不可能的。如果你在一个段落标签中放入一些内容，想要将一个链接浮动到该段落的右下角，请将该链接放在段落块中，并将其设置为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>

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

你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父div的底部。

如果你需要相对对齐和DIV仍然不能给你你想要的，只是使用表格和设置valign = "bottom"在单元格你想要的内容对齐到底部。我知道这不是对你的问题的一个很好的回答，因为DIV应该取代表，但这是我最近对一个图像标题所做的，到目前为止它工作得完美无缺。

不确定，但如果你在子div上使用位置:相对而不是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>

而且没有桌子……!

我在第一次尝试时通过在CSS内部的div ID中添加position:absolute; bottom:0;来实现这一点。我没有添加父样式position:relative;。

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

我也尝试了之前发布的这个场景;

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

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

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

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

使用绝对位置div的建议真的很愚蠢，因为整个浮点数的事情有点失去了绝对位置。

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

为了达到类似的效果，你可以这样做:不让div浮动，但设置它的显示属性为inline-block。然后你可以按照自己的喜好垂直排列。你只需要设置父div属性vertical-align为top， bottom， middle或baseline

我希望这能帮助到一些人

另一种解决方案是明智地使用表和行span。通过设置前一行的所有表格单元格(除了主要内容外)为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>

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

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

唯一的问题是，这只适用于你知道盒子的高度。

以下是我的解决方案:

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

我已经在JQuery中实现了这一点，通过将一个零宽度的支柱元素放在浮动的右边，然后根据父高度减去浮动的子高度调整支柱(或管道)的大小。

$("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中的文本。

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

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

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

前面答案中的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; }
}

让它起作用的方法如下:

• 像往常一样将元素向左浮动

• 使用旋转父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/ < / p >

• 现在将所有向左浮动的元素(给它们一个类)旋转180度，使它们再次平直。瞧!他们浮到水底。

我只需要做一个表格。

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

我尝试了其中的几种方法，下面的方法对我来说很有效，所以如果其他方法都失败了，那就试试这个吧，因为它对我很有效。

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


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

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/

我知道这是一个非常古老的话题，但我仍然想回答。如果有人遵循下面的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>

如果你想要文本包装漂亮:-

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

简单……在HTML文件....将“footer”(或你想要在底部的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文件，让“边栏”浮动到左边。然后将content浮动到右边，然后将footer清除。

这应该有用。对我来说是这样。

随着< >强Flexbox < / >强的引入，这变得非常容易，不需要太多的破解。子元素上的align-self: flex-end将使它沿着横轴对齐。

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

这是现在可能的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>

如果你将父元素设置为position:relative，你可以将子元素设置为底部设置位置: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>

align-self: flex-end;

链接:

.invisible {
float: left;
}


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