给定以下HTML:

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

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


当前回答

对于容器中只有一个子div的容器,可以使用表格单元格和垂直对齐方法,这种方法可以可靠地将单个div定位在父div的底部。

注意,使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。

#{容器 显示:表; 宽度:100%; 身高:200 px; } #{项 显示:表格单元; vertical-align:底部; } < div id = "容器" > <div id="item">单个底部项目</div> < / div >

其他回答

此外,如果有使用位置的规定:绝对;或者position:relative;,你总是可以尝试填充父div或放置margin-top:x;。在大多数情况下不是一个很好的方法,但在某些情况下可能会派上用场。

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

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

不要在底部使用"position:absolute"作为粘性页脚。那么你可以这样做:

html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body> <!--HTML Code--> <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>

对于容器中只有一个子div的容器,可以使用表格单元格和垂直对齐方法,这种方法可以可靠地将单个div定位在父div的底部。

注意,使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。

#{容器 显示:表; 宽度:100%; 身高:200 px; } #{项 显示:表格单元; vertical-align:底部; } < div id = "容器" > <div id="item">单个底部项目</div> < / div >

试试这个;

<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>