视频高度 100vh 忽略溢出隐藏。

Question

我正在使用 100vh 使超大屏幕及其背景填满用户的屏幕。使用照片时我没有遇到这个问题，但我的客户想要视频背景。

我已将溢出设置为隐藏，但网站显示的溢出带有水平滚动条。我不明白为什么它不会切断它。

这是我的超大屏幕和视频功能代码。

    #video-background { 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -1000;
    height: 100vh;
    }

   .jumbotron{
    font-family: 'Raleway', Helvetica, Arial;
    background: rgba(0,0,0,0.6);
    background-size: cover;
    background-position: center;
    height: 100vh;
    padding: 60px 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    }

HTML

    <div class="jumbotron">
       <video id="video-background" preload muted autoplay loop>
          <source src="vid/lowres.mp4" type="video/mp4">
       </video>
    </div>

显然，超大屏幕内部还有更多内容，但我认为这无关紧要。

Answer 1

你的设置太低了，尝试在它上面的 DOM 节点上设置，在 .jumbotron 上，对我来说 chrome。

Answer 2

溢出-x：隐藏；在 chrome 对我来说很好用。我没有看到任何水平滚动条。试试看

.jumbotron{
    font-family: 'Raleway', Helvetica, Arial;
    background: rgba(0,0,0,0.6);
    background-size: cover;
    background-position: center;
    height: 100vh;
    padding: 60px 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    }

视频高度 100vh 忽略溢出隐藏。

Video height 100vh ignoring overflow hidden.

css

overflow