给定以下HTML:

< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

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


当前回答

试试这个;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

其他回答

如果您使用内联块元素的文本对齐特性知道#容器的高度,您确实可以在不使用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;
}

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

#container {
  display: table;
}

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

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

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

#{容器宽度:100%;浮:左;位置:相对;} #{版权:绝对;底部:0 px;左:0 px;背景:# F00;宽度:100%;} #容器{背景:灰色;身高:100 px;} < div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

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

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

显示:w3schools.com

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

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