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

给定以下HTML:

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

当前回答

可能不是。

指定位置:相对于#容器，然后position:绝对;底部:0;#版权。

2009-02-08 17:13:26

其他回答

实际上，@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

虽然这里提供的答案似乎都不适用于我的特定情况，但我看到了一篇文章，它提供了一个简洁的解决方案:

#container {
  display: table;
}

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

我发现它非常有用，适用于移动显示的响应式设计，而不必重新排序网站的所有html代码，将主体本身设置为一个表。

请注意，只有第一个表脚-组或表头-组会被这样呈现:如果有多个表脚-组，其他的将被这样呈现。

2014-08-19 00:37:09

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

纯CSS，没有绝对定位，没有固定高度，跨浏览器(IE9+)

看看那个工作小提琴

因为正常的流程是“从上到下”，我们不能简单地要求#copyright div粘到他的父端的底部而没有某种绝对的定位，但如果我们想要#copyright div粘到他的父端的顶部，这将是非常简单的-因为这是正常的流程方式。

所以我们要利用这一点。我们将改变div在HTML中的顺序，现在#copyright div在顶部，内容紧随其后。我们还让内容div一直延伸(使用伪元素和清除技术)

现在只需要将视图中的顺序颠倒过来。这可以很容易地用CSS转换。

我们把容器旋转180度，现在:向上就是向下。(我们将内容反向，使其看起来正常)

如果我们想在内容区域内有一个滚动条，我们需要应用更多的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">  <div>Element 1</div> <div>Element 2</div> </div> </div>

2013-10-01 08:38:45

如果您使用内联块元素的文本对齐特性知道#容器的高度，您确实可以在不使用position:absolute的情况下将方框对齐到底部。

在这里你可以看到它的行动。

这是代码:

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

2013-06-07 04:26:31

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

推荐文章

最新文章

标签