绝对位置高度和底部元素

Question

我有绝对定位的div，当然没有高度，因此底层元素（在HTML层次结构中）在页面中没有正确的位置。

这里是链接：[已删除]

绝对定位div位于＃page-wrapper。

问题：我需要＃red-bottom（body child）元素到达页面底部。

我可以给＃page-wrapper（也是body child）固定高度，或设置固定边距。但问题是，该文本可以更短或更长。所以身高也很有活力。

那么如何解决所有情况（动态）？

由JavaScript修复。

Answer 1

  

那么如何解决所有情况（动态）？

您有两种选择：

• 使用JavaScript定位红条。
• 请勿使用绝对定位来定位页面上的元素。

如果文本数量不同，则无法使用CSS将红条始终移到底部。

完全可以在不使用绝对定位的情况下实现相同的布局。

阅读：http://www.htmldog.com/guides/cssadvanced/layout/

Answer 2

旧问题，但想发布一个非JavaScript的答案。使用绝对布局并指定顶部/右侧/底部/左侧属性，确实可以创建包含标题，侧边栏，主要部分和页脚的布局，而无需任何javascript。如果您查看在线书签工具zootool.com并在那里获得免费帐户，您可以看到这样的布局的实时示例（如果您想证明它是可能的）。检查他们的页面来源，你会发现他们正在做这样的事情。

类似于iTunes的布局非常容易使用具有绝对定位的CSS创建。如果您假设您的侧边栏始终具有相同的宽度，它也适用于调整屏幕大小。

在应用程序中有一个标题，侧边栏，主页和页脚是很常见的 - 但如果你有更复杂的东西，这种方法可能会变得比它的价值更麻烦，并且javascript解决方案可能更好。