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

给定以下HTML:

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

当前回答

针对此特定场景的解决方案:

将inner放在父元素的底部。父节点的高度由它的“最高”兄弟节点的高度设置

设置:

我有一行与多个<div class="容器"> 这些<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>

2021-10-26 14:56:50

其他回答

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

#container {
  display: table;
}

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

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

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

2014-08-19 00:37:09

你可以通过为顶部的内容分配可用空间来使用网格:

2021-12-03 18:44:27

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

你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?

2009-02-08 17:12:05

可能不是。

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

2009-02-08 17:13:26

纯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

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

推荐文章

最新文章

标签