代码之家 › 专栏 › 技术社区 › Chris

将flexbox的<video>中心与可变高度对齐

html5 css html

Chris · 技术社区 · 7 年前

我有一个包含3个主要元素(页眉、视频、设置页脚)的视频页面。设置页脚是可折叠的。

当设置页脚可见时,我对布局很满意,但我希望在设置页脚折叠后,我可以增加视频的大小以占据剩余的高度。换句话说,在页脚折叠时,视频的大小应该会稍微增大。

以下是我到目前为止的情况:

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

body {
  font-size: 16px;
}

.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;
}

.video-container .video-player {
  border: 0.1875rem solid black;
  display: flex;
  overflow: hidden;
  position: relative;
}

my-video-player {
  background-color: transparent;
  display: block;
  font-family: arial, sans-serif;
  font-size: 12px;
  position: relative;
}

my-video-player .video video {
  height: auto;
  max-height: calc(100vh - 19.75rem);
  max-width: 100%;
  width: auto;
}

.settings-container {
  background: #f4f4f4;
  display: flex;
  flex: 0 1 15rem;
  flex-direction: column;
  position: relative;
  top: 0;
  transition: flex .5s;
}

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

<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>