基于HTML Fullscreen API实现动态生成Div的高度响应式适配

嘿，这个问题我太熟了！之前做拖拽看板的时候也踩过同样的坑——固定高度的子元素在父容器全屏后只会拉宽，高度纹丝不动，因为像素值是死的，不会跟着视口走。不过咱们有办法既能保留空Div的固定高度需求，又能让它在全屏时自适应，给你两个实用方案：

方案一：CSS变量 + JavaScript 动态计算（灵活适配动态子元素数量） #

这个方案的核心是用CSS变量存储子元素的基准高度，在全屏切换时通过JS动态计算并更新这个变量，既能在小屏保持固定高度，又能在全屏时自适应父容器尺寸。

代码实现 #

HTML结构

<div class="main-container">
  <div class="inner-div"></div>
  <div class="inner-div"></div>
  <!-- 可以动态添加更多子Div -->
</div>
<button id="toggle-fullscreen">切换全屏</button>

CSS样式

.main-container {
  /* 小屏状态下的主容器样式 */
  width: 800px;
  height: 600px;
  margin: 20px auto;
  padding: 10px;
  background-color: #f0f0f0;
  /* 定义子元素基准高度变量，小屏时用固定像素 */
  --inner-base-height: 140px;
}

.inner-div {
  /* 用变量设置高度，空Div也能保持固定高度 */
  height: var(--inner-base-height);
  min-height: var(--inner-base-height);
  width: 100%;
  margin: 10px 0;
  background-color: #ccc;
}

/* 全屏状态下的主容器样式 */
.main-container:fullscreen {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 15px;
}

JavaScript逻辑

const mainContainer = document.querySelector('.main-container');
const toggleBtn = document.getElementById('toggle-fullscreen');
// 保存小屏时的原始基准高度
const originalInnerHeight = getComputedStyle(mainContainer).getPropertyValue('--inner-base-height');

toggleBtn.addEventListener('click', async () => {
  if (!document.fullscreenElement) {
    // 进入全屏
    await mainContainer.requestFullscreen();
    // 计算全屏时子元素的自适应高度：主容器可用高度减去所有间距，再平分给子元素
    const containerAvailableHeight = mainContainer.clientHeight;
    const innerDivs = document.querySelectorAll('.inner-div');
    const divCount = innerDivs.length;
    // 获取单个子Div的上下外边距总和
    const singleDivMargin = parseInt(getComputedStyle(innerDivs[0]).marginTop) * 2;
    // 总间距 = 子Div之间的间距 + 主容器上下内边距
    const totalSpacing = (singleDivMargin * divCount) + (parseInt(getComputedStyle(mainContainer).paddingTop) * 2);
    // 计算每个子Div的目标高度
    const targetHeight = (containerAvailableHeight - totalSpacing) / divCount;
    // 更新CSS变量
    mainContainer.style.setProperty('--inner-base-height', `${targetHeight}px`);
  } else {
    // 退出全屏
    await document.exitFullscreen();
    // 恢复原始固定高度
    mainContainer.style.setProperty('--inner-base-height', originalInnerHeight);
  }
});

方案二：纯CSS适配（适合固定数量的子元素） #

如果你的子Div数量是固定的，不需要动态添加，用纯CSS就能搞定，不用写JS逻辑。

代码实现 #

.main-container {
  width: 800px;
  height: 600px;
  margin: 20px auto;
  padding: 10px;
  background-color: #f0f0f0;
}

.inner-div {
  /* 小屏固定高度，空Div也能保持 */
  height: 140px;
  min-height: 140px;
  width: 100%;
  margin: 10px 0;
  background-color: #ccc;
}

/* 全屏时覆盖子元素高度 */
.main-container:fullscreen .inner-div {
  /* 假设有2个子Div，总间距包括主容器内边距和子Div外边距 */
  height: calc((100vh - 50px) / 2);
  min-height: auto; /* 全屏时不需要固定最小高度 */
}

关键注意事项 #

• min-height的作用：小屏状态下一定要给子Div设置min-height等于固定高度，确保空Div也能保持尺寸；全屏时可以把min-height设为auto，让自适应高度生效。
• 全屏API兼容性：虽然现代主流浏览器都支持标准的Fullscreen API，但如果要兼容旧版浏览器，可以加上前缀（比如webkitRequestFullscreen、mozRequestFullScreen），不过现在大部分场景下不需要了。
• 间距计算要准确：不管用哪种方案，计算高度时都要把主容器的内边距、子Div的外边距等因素考虑进去，避免出现滚动条或者元素溢出的情况。

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