Question

我在Chrome中遇到了奇怪的重排问题。

当我调整浏览器的高度时，粉红色div顶部和底部的两个div不会更新它们的宽度，除非我正在做一个丑陋的超时解决方法，我隐藏并显示容器（我不是喜欢那种解决方法）。这适用于FF和Safari，所以这是一个Chrome错误。

一个重要的要求是粉红色的中间div决定了父div的大小，因为它是一个视频，我需要以全高显示它，而不指定宽度。

有没有办法解决这个问题而不用丑陋的JS解决方法？

HTML：

<div class="video-wrapper">
  <div class="header"><div class="left"></div><div class="right"></div></div>
  <div class="video">
    <span>1</span>
    <video></video>
  </div>
  <div class="footer"><div class="left"></div><div class="right"></div></div>
</div>

CSS：

.video-wrapper{
    display: inline-block;
    height: 100%;
}

.video-wrapper .header,
.video-wrapper .footer{
  width: 100%;
  height: 8px;
  border: 1px solid;
}

.video-wrapper .video{
   height: calc(100% - 16px); 
}

.video-wrapper video {
  height: 100%;
  border: 1px solid pink;
}

.video-wrapper span{
  position: absolute;
  top:20px;
  left:0;
}

这是一个带有复制品的JSFiddle：https://jsfiddle.net/7o27qkpx/3/

Answer 1

我想我已经理解了您的要求，并且基于我已经编辑了您的Css，请用您的css替换它并告诉我这是否正常如果是，我会解释代码，如果没有，那么请你澄清你的要求更准确。

编辑Css：

          .video-wrapper{
    display: block;
    height: 100%;
            position: relative;
}

.video-wrapper .header,
.video-wrapper .footer{
  width: 100%;
  height: 8px;
  border: 1px solid;
}

.video-wrapper .video{
   height: calc(100% - 16px); 
    width: 100%;
}

.video-wrapper video {
  height: 100%;
  border: 1px solid pink;
    width: 100%;
}

.video-wrapper span{
  position: absolute;
  top:20px;
  left:0;
}

调整大小时的重排问题：应更新div大小

1 个答案: