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

给定以下HTML:

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

当前回答

实际上，@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应该让我们的生活更简单——总的来说，它做到了——但事实是，即使经过了这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。它是不完整的。

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

2012-02-01 03:53:15

其他回答

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

#{母公司背景:绿色; 宽度: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

代码依赖链接在这里。

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

显示:w3schools.com

有位置的元素:绝对的;定位相对于最近的定位祖先(而不是相对于视口，像固定)。

所以你需要将父元素定位为相对或绝对元素，等等，并将所需元素定位为绝对元素，然后将bottom设置为0。

2020-02-06 13:21:25

CSS网格

由于CSS Grid的使用正在增加，我想建议align-self到网格容器内的元素。

Align-self可以包含任何值:end, self-end, flex-end，如下例所示。

#{母公司显示:网格; ｝ # child1 { align-self:结束; ｝ /*额外的样式片段*/ #{母公司身高:150 px; 背景:# 5548 b0; 颜色:# fff; 填充:10 px; 字体类型:无衬线; ｝ # child1 { 高度:50 px; 宽度:50 px; 背景:# 6 a67ce; text-align:中心; vertical-align:中间; 行高:50 px; ｝ < div id = "父" > <！——这里的其他元素——> " child1 " < div id = > 1 < / div > < / div >

2019-08-22 16:25:47

灵活的方法!

在受支持的浏览器中，您可以使用以下方法:

例子

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

.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; flex-direction:列; ｝ .child { 高度:40像素; 宽度:100%; 背景:# f00; margin-top:汽车; } < div class = "父" > <div class="child">对齐到底部</div> < / div >

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

例子

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

.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; ｝ .child { 高度:40像素; 宽度:100%; 背景:# f00; align-self: flex-end; ｝ < div class = "父" > <div class="child">对齐到底部</div> < / div >

作为旁注，您可能希望添加供应商前缀以获得额外支持。

2015-01-07 05:04:24

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

推荐文章

最新文章

标签