给定以下HTML:

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

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

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

其他回答

显示:w3schools.com

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

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

CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位:

position:absolute;
bottom:0;

可能不是。

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


#{容器 位置:相对; } #{版权 位置:绝对的; 底部:0; } < div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

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

#container {
  display: table;
}

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

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

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

下面是一种方法,目的是使具有已知高度和宽度(至少大约)的元素浮到右边并停留在底部,同时作为其他元素的内联元素。它集中在右下角,因为您可以通过其他方法轻松地将它放置在任何其他角落。

我需要制作一个导航栏,在右下角有实际的链接和随机的兄弟元素,同时确保栏本身适当拉伸,而不破坏布局。我使用了一个“shadow”元素来占据导航栏的链接空间,并将其添加到容器子节点的末尾。


<!DOCTYPE html>
<div id="container">
  <!-- Other elements here -->
  <div id="copyright">
    Copyright Foo web designs
  </div>
  <span id="copyright-s">filler</span>
</div>

<style>
  #copyright {
    display:inline-block;
    position:absolute;
    bottom:0;
    right:0;
  }
  #copyright-s {
    float:right;
    visibility:hidden;
    width:20em; /* ~ #copyright.style.width */
    height:3em; /* ~ #copyright.style.height */
  }
</style>