Flexbox布局下<video>居中及页脚折叠时自适应填充剩余空间

嘿，我明白你的需求了——页脚折叠后，视频能自动填充header和页脚之间的剩余高度，而且不想用硬编码的max-height对吧？咱们可以利用Flexbox的特性加上object-fit来完美解决这个问题，完全不需要JS干预视频尺寸，纯CSS就能搞定。

问题分析 #

你现在的硬编码max-height: calc(100vh - 19.75rem)没法动态响应页脚的折叠状态，因为这个值是固定的。而我们的目标是让视频的高度完全由它的父容器.video-container来决定，这个容器的高度会随着页脚的伸缩自动变化（因为.main-container是Flex布局，.video-container的flex:1会占据剩余空间）。

修改后的完整代码 #

HTML（无需改动，保持原样）

<div class="main-container">
  <div class="header-container">Header</div>
  <div class="video-container">
    <div class="video-player">
      <my-video-player>
        <div class="video">
          <video autobuffer controls>
            <source id="mp4" src="http://footage.framepool.com/mov/521-436-838.mp4" type="video/mp4">
          </video>
        </div>
      </my-video-player>
    </div>
  </div>
  <div class="settings-container">Settings - click me to collapse</div>
</div>

CSS（核心修改部分）

body {
  font-size: 16px;
  margin: 0; /* 去掉默认margin，避免页面出现滚动条 */
}

.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.header-container {
  align-items: center;
  border-bottom: 0.0625rem solid #b2b2b2;
  display: flex;
  flex: 0 0 1.938rem;
  padding: .25rem .9375rem;
}

.video-container {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  padding: .9375rem;
  /* 确保容器能正确传递高度给子元素 */
  height: 0; /* Flex布局下让flex:1生效的小技巧，避免高度溢出 */
  min-height: 0; /* 解决Flex子元素内容溢出时不收缩的问题 */
}

.video-container .video-player {
  border: 0.1875rem solid black;
  /* 让video-player占满video-container的可用空间，同时保持居中 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

my-video-player {
  background-color: transparent;
  display: block;
  font-family: arial, sans-serif;
  font-size: 12px;
  width: 100%;
  height: 100%;
}

my-video-player .video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

my-video-player .video video {
  /* 去掉硬编码的max-height，改用以下属性 */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* 关键：保持视频比例，填充容器同时不拉伸 */
  object-fit: contain;
}

.settings-container {
  background: #f4f4f4;
  display: flex;
  flex: 0 1 15rem;
  flex-direction: column;
  position: relative;
  top: 0;
  transition: flex .5s;
  align-items: center;
  justify-content: center; /* 让文字居中，体验更好 */
}

.settings-container.collapsed {
  flex: 0 0 2.4rem;
}

JS（保持原样即可）

var el = document.getElementsByClassName("settings-container")[0];
el.addEventListener("click", function(e) {
  e.target.classList.toggle("collapsed");
});

关键改动说明 #

1. .video-container的高度处理：添加height:0和min-height:0，这是Flex布局中常见的技巧，确保flex:1能正确计算剩余空间，避免子元素内容溢出导致容器高度异常。
2. 视频容器的层级适配：让.video-player、my-video-player、.video都设置为width:100%和height:100%，同时用flex布局居中内部元素，保证视频能填充整个可用区域。
3. 视频的自适应比例：用object-fit: contain代替硬编码的max-height，这个属性会让视频保持原有宽高比，同时尽可能填充容器空间，不会出现拉伸或变形的情况。

现在你点击页脚折叠时，.video-container会自动扩展高度，视频也会跟着放大到合适的尺寸，完全符合你的需求！

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