如何让main div仅向下扩展，避免向上覆盖navbar

你的问题核心在于 .main 使用了绝对定位和垂直居中变换，导致它脱离正常文档流、忽略导航栏空间；同时 body 固定了高度，无法随内容撑开。以下是修复步骤和代码：

关键问题分析 #

• 绝对定位破坏文档流：.main 的 position: absolute 使其脱离正常布局，不会考虑导航栏的位置，因此会向上侵入。
• 固定高度限制内容扩展：body 的 height:100dvh 固定了视口高度，当 .main 内容过多时，无法撑开页面。
• 垂直居中导致重叠：transform: translate(-50%, -50%) 将 .main 垂直居中，刚好覆盖导航栏区域。

修复后的代码 #

CSS

.main {
  margin: 2dvh auto; /* 上下边距2dvh，左右自动居中 */
  background-color: rgb(41, 143, 233);
  min-width: 80dvh;
  max-width: 150dvh;
  min-height: calc(100dvh - 4dvh - 80px); /* 占满剩余视口高度，减去边距和导航栏高度（80px需根据实际调整） */
  width: auto;
  overflow-y: auto; /* 内容过多时内部滚动，可选择去掉让页面整体滚动 */
}

body {
  min-height: 100dvh; /* 最小高度为视口，内容多时自动撑开 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
}

.navbar {
  position: static;
  text-align: center;
  width: 100%;
  margin: 0;
  height: auto;
  color: white;
  padding: 1dvh;
  box-sizing: border-box;
}

HTML

<body>
  <div class="navbar">
    <h1>title</h1>
    <div style="justify-content: space-evenly;display:flex;">
      <a class="navelement">
        <u><h2>navelement</h2></u>
      </a>
      <a class="navelement">
        <u><h2>navelement</h2></u>
      </a>
      <a class="navelement">
        <u><h2>navelement</h2></u>
      </a>
    </div>
  </div>
  <div class="main">
    <!-- 此处添加大量内容测试效果 -->
  </div>
</body>

额外说明 #

• 如果不需要 .main 内部滚动，去掉 overflow-y: auto 即可，页面会整体滚动，body 会自动撑开容纳所有内容。
• 若要精确计算 .main 的剩余高度，需将 calc 中的 80px 替换为导航栏的实际高度（可通过浏览器开发者工具查看）。

内容的提问来源于stack exchange，提问作者hamjua