css - HTML CSS DIV 排列

Question

大家好。我需要帮助来安排我网站的 div。我的网站有 3 个主要 DIV。 1. DIV1——我的页眉(固定高度) 2. DIV2 - 高度变化的动态内容区域 3. DIV3 - 我的页脚(固定高度)

所有 DIV 的宽度都是 100%。

DIV1 header 相对于浏览器顶部的间距必须为 0px。如图所示，我希望 3 个 DIV 必须彼此重叠。如果用户的分辨率比我的 3 个 DIV 高，那么在 DIV 之后的最底部就是空白。但是，我似乎无法使该布局正常工作。 DIV3 页脚一直给我带来麻烦。

我有以下 CSS 代码:

div1 {
  position: fixed;
  top: 0px;
}
div2 {
  position: relative;
  top: 0px;
}
div3 {
  position: fixed;
  top: 0px;
}

如果我为 DIV3 使用 position: fixed，而我的 DIV2 的内容较短，整个网站看起来会很奇怪。如果我尝试更改为 position: relative for DIV3，DIV3 将重叠并出现在 DIV1 的前面。

对此有更好的建议吗？非常感谢。

Answer 1

您使用定位来布置 div 有什么原因吗？

Div 将自然地相互堆叠，无需定位。