如何设置视频高度为全屏减去50px头部高度？

嗨，这个需求其实挺常见的，我给你分享几种简单且可靠的实现方式：

方案一：CSS calc() 函数（最推荐） #

这是最直接的纯CSS解决方案，利用calc()来计算视口高度减去50px的差值。100vh代表当前浏览器视口的总高度，减去头部的固定50px后，就是视频容器需要的高度。

注意：calc()里的减号前后必须加空格，否则浏览器会识别错误！

示例代码：

<!-- HTML结构 -->
<div class="video-wrapper">
  <video src="your-video-source.mp4" controls></video>
</div>

/* CSS样式 */
.video-wrapper {
  height: calc(100vh - 50px);
  /* 可选：如果要视频完全填满容器，给video加下面的样式 */
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持视频比例并填满容器，也可以用contain根据需求调整 */
}

方案二：绝对定位自动填充 #

如果你的头部是固定定位（比如position: fixed; top: 0; height: 50px;），可以用绝对定位让视频容器自动占据除头部外的所有空间，不用手动计算：

.video-wrapper {
  position: absolute;
  top: 50px; /* 头部高度 */
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; /* 防止视频超出容器 */
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方案三：JavaScript动态计算（适合动态高度场景） #

如果头部高度不是固定的50px，或者你需要兼容一些对vh支持不太友好的旧环境，可以用JS动态计算并设置高度：

function updateVideoHeight() {
  const headerFixedHeight = 50; // 或者用document.querySelector('.header').offsetHeight获取实际头部高度
  const videoContainer = document.querySelector('.video-wrapper');
  videoContainer.style.height = `${window.innerHeight - headerFixedHeight}px`;
}

// 页面加载时初始化
updateVideoHeight();
// 窗口大小变化时重新计算
window.addEventListener('resize', updateVideoHeight);

这个方案还能处理窗口 resize、移动端浏览器地址栏变化等动态场景，灵活性更高。

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