HTML/CSS 布局问题答案

【问题标题】：HTML/CSS layout questionHTML/CSS 布局问题
【发布时间】：2010-05-01 12:45:12
【问题描述】：

如果您不介意，我只需要一些 CSS 布局方面的帮助。

我正在尝试解决三件事，我需要一些帮助才能按照我希望的方式完成这项工作。

我有一个页面的<body> 元素，显然我想成为浏览器窗口的100%。

然后我有两个 <div> 元素，我想将它们堆叠在一起，但诀窍是，我想要底部的 <div>，（一个真正应该是固定高度）来确定顶部的高度<div>。

有没有办法在 CSS 中进行布局？

【问题讨论】：

您能否提供更多信息，说明您为什么要这样做？可能有更好的方法，但如果无法更好地理解意图，我们将无能为力。代码通常也是一个好主意。
还有更多的因素需要考虑。你基本上是说底部<div> 应该粘在页面底部，而不管总高度如何（这样当顶部<div> 高于视口时它仍然停留在那里，因此应该单独获得滚动条） ?或者如果其内容小于视口的总高度，您是否要将顶部的<div> 扩展到页面底部？这使得答案大不相同。
我同意，目的是什么？你想摆脱滚动条吗？我认为只关注底部栏的特定高度就足够了，而不要理会页面的其余部分。

标签： html css

【解决方案1】：

我假设您希望第一个 <div> 的高度为 <body> 减去第二个 <div> 的高度。

如果您在布局中使用百分比，则可以使一个高度为 90%，另一个高度为 10%。

但如果您使用像素大小，则需要使用 javascript。在 CSS 2 中无法通过减法来确定高度。您可以使用 offsetHeight 获取一个元素的像素高度，并使用 style.height 设置另一个元素的高度。

【讨论】：

【解决方案2】：

如果您希望底部<div> 始终固定在视口底部而不管顶部<div> 的高度，则将其position 设置为fixed。例如

#menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
}

如果你想将顶部<div>扩展到页面底部，如果它的内容小于视口的总高度，即“粘性页脚”技术，那么看看here或@ 987654322@.

【讨论】：