如何动态计算video标签高度以覆盖父容器预留的padding-bottom空间？

嘿，我完全懂你的需求——就是要让背景视频彻底填满main容器的所有空间，包括它预留的padding-bottom，和下面的bottom部分无缝衔接，一点空隙都不留对吧？我来给你拆解两种可行的方案，一个用纯CSS，一个用JavaScript动态计算，你可以根据自己的场景选。

先理清楚问题根源 #

你当前的代码里，video是相对于.video-container绝对定位的，但.video-container只占据了main的内容高度，没把main的padding-bottom算进去。所以视频只能覆盖到.video-container的底部，自然就留下了padding-bottom的空白。要解决这个问题，核心就是让视频的高度包含main的padding-bottom部分。

方案一：纯CSS实现（适合固定padding值的场景） #

如果main的padding-bottom是固定值（比如你写的11.5rem），用CSS变量+calc()就能轻松搞定，不用写JS：

/* 用CSS变量统一管理padding值，方便后续修改 */
:root {
  --main-padding-bottom: 11.5rem;
}

main {
  padding-bottom: var(--main-padding-bottom);
  position: relative; /* 让video可以相对于main定位 */
  min-height: 100vh; /* 可选：确保main至少占满视口高度，根据你的需求调整 */
}

.video-container {
  position: static; /* 取消原来的relative，让video的定位基准变成main */
  height: 100%;
}

.video-container video {
  width: 100%;
  /* 计算高度：main的内容高度 + 预留的padding-bottom */
  height: calc(100% + var(--main-padding-bottom));
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover; /* 保留这个属性，确保视频按比例覆盖，不拉伸变形 */
}

对应的HTML结构保持你原来的就行：

<main>
  <div class="video-container">
    <video autoplay muted loop>
      <source src="你的视频地址.mp4" type="video/mp4" />
    </video>
  </div>
</main>
<div class="bottom">
  <!-- 下面的内容 -->
</div>

这个方案的原理是：把main设为relative，让视频的绝对定位基准从.video-container变成main，然后用calc()把视频高度设为main的内容高度加上padding-bottom的值，这样视频就会直接延伸到main的最底部，和下面的bottom无缝衔接。

方案二：JavaScript动态计算（适合padding值动态变化的场景） #

如果main的padding-bottom会根据屏幕尺寸或者其他条件动态变化（比如响应式布局），那就需要用JS实时计算高度：

function adjustVideoHeight() {
  // 获取DOM元素
  const mainEl = document.querySelector('main');
  const videoContainer = document.querySelector('.video-container');
  const videoEl = document.querySelector('.video-container video');
  
  if (!mainEl || !videoContainer || !videoEl) return;
  
  // 获取main的padding-bottom值，转换为像素（因为getComputedStyle可能返回rem/em等单位）
  const mainPaddingBottom = parseFloat(window.getComputedStyle(mainEl).paddingBottom);
  // 获取video-container的实际高度
  const containerHeight = videoContainer.offsetHeight;
  // 计算视频需要的总高度
  const targetHeight = containerHeight + mainPaddingBottom;
  
  // 设置视频高度
  videoEl.style.height = `${targetHeight}px`;
}

// 页面加载完成后执行一次
window.addEventListener('load', adjustVideoHeight);
// 窗口大小变化时重新计算（适配响应式）
window.addEventListener('resize', adjustVideoHeight);

这个方法会在页面加载和窗口大小改变时，自动计算视频需要的高度，确保它始终覆盖main的padding-bottom空间。

几个关键注意事项 #

• 一定要保留object-fit: cover：这个属性能让视频按原有比例填充整个容器，不会因为拉伸而变形，保证视觉效果。
• 如果main有边框或者其他内边距，记得在计算时把这些值也考虑进去（比如如果main有padding-top，那视频的top值可能需要调整）。
• 测试不同屏幕尺寸：不管用哪种方案，都要在不同设备上测试，确保视频始终和bottom部分无缝衔接。

内容来源于stack exchange