如何防止叠加div在底部创建额外空间？

Question

我的网站上有一个HTML5视频，它被div叠加，为它添加了一种很酷的颜色，但由于某种原因，它在它和我网站的下一部分底部创建了额外的空间（参见图片供参考）

正如您所看到的，紫色叠加层和黄色部分之间存在一个小差距，基本上，叠加层不适应视频。

HTML：

    <div id="vid-overlay"></div>
    <div class="vid-container">
    <video autoplay loop>
       <source src="video/Hello-World2.mp4" type="video/mp4"></source>
       <source src="video/Hello-World2.webm" type="video/webm"></source>
      </video>
    </div>

CSS：

video{
  width:100%;
  height:auto;
  display:block;
  float:left;
  margin:0;
  padding:0; 
}

#vid-overlay{
background: rgba(96,80,99,1);
background: -moz-linear-gradient(top, rgba(96,80,99,1) 0%, rgba(96,80,99,0.51) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, 
  position:absolute;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

Answer 1

position:absolute div中您的要求是否需要vid-overlay。

如果不是，请尝试：position:relative。 这可以解决您的重叠错误。

Answer 2

视频标记默认为内联块。您需要将其显示为块元素，如下所示：

video {display: block;}