Question

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

我将溢出设置为隐藏，但网站显示水平滚动条的溢出。我无法弄清楚为什么它不会切断它。

这是我的jumbotron和视频功能的代码。

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

显然，jumbotron内部有更多内容，但我不认为这是相关的。

Answer 1

你设置得太低，尝试在它上面的DOM节点上设置.jumbotron，为我工作chrome。

Answer 2

Overfow-X：隐藏;铬合金对我来说很好。我没有看到任何水平滚动条。试试那个

.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忽略溢出隐藏。

2 个答案: