无需外部库：如何实现content高度自适应，不足占满剩余空间，超出撑开body

完全可以实现你要的效果，用原生CSS+JS就能搞定，不需要任何外部库。下面是具体实现步骤：

1. 精简HTML结构 #

移除冗余的无效链接（比如未启用的custom-css），精简后的代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/main-styles.css">
  <link rel="icon" type="image/png" href="./favicon.png">
  <link rel="apple-touch-icon" type="image/png" href="./favicon.png">
  <base href="./">
  <title>Perfume Finder</title>
</head>
<body>
  <h1>Perfume Finder</h1>
  <h2 id="txt-title"></h2>
  <div id="content"></div>
  <script type="module" src="./modules/script.js"></script>
</body>
</html>

2. CSS核心布局实现 #

在main-styles.css中添加以下样式，利用Flexbox自动分配空间：

/* 重置默认边距，避免布局计算偏差 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让html和body至少占满视口高度，同时允许内容超出时自动延伸 */
html, body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 给h1设置固定高度，可根据字体大小调整 */
h1 {
  height: 64px; /* 示例高度，按需修改 */
  line-height: 64px; /* 保证文字垂直居中 */
}

/* h2默认隐藏，高度可自定义 */
h2#txt-title {
  display: none;
  height: 48px; /* 示例高度，按需修改 */
  line-height: 48px;
}

/* 让content自动填充h1、h2之外的剩余空间 */
#content {
  flex: 1;
  /* 若需要content内容超出时内部滚动，添加下面一行；若要让body整体撑开，删除此行 */
  /* overflow-y: auto; */
}

3. JS控制h2显示/隐藏 #

在你的模块脚本中，通过原生JS切换h2的显示状态即可：

// 显示h2
document.getElementById('txt-title').style.display = 'block';
// 隐藏h2
document.getElementById('txt-title').style.display = 'none';

效果说明： #

• 当h2隐藏时，content会自动填充视口高度 - h1高度的空间；当h2显示时，自动填充视口高度 - h1高度 - h2高度的空间。
• 如果content内部内容高度超过分配的空间：
  • 若未设置overflow-y: auto，body会被内容自动撑开，高度超过视口；
  • 若设置了overflow-y: auto，content会出现垂直滚动条，body保持视口高度（除非h1/h2高度变化）。

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