如何在全屏背景视频下方显示内容答案

【问题标题】：how to display content below fullscreen background video如何在全屏背景视频下方显示内容
【发布时间】：2017-05-02 12:40:32
【问题描述】：

我正在设计一个登陆页面，其中我有一个全屏背景视频，然后当用户向下滚动时，视频下方有内容。我已经设法通过将内容设置为具有 100vh 的上边距来使其工作，但视频和内容之间存在巨大差距......

HTML

  <body>
  <div class="bgvid-back">
  <video class="bgvid" poster="media/skyline.jpg" autoplay="true" loop muted width="100%">
      <source src="media/BnW.webm" type="video/webm">
      <source src="media/BnW.mp4" type="video/mp4">      
  </video>
  </div> 
  <ul class="menu">
        <li>
            <a href="#" class="navburger" data-toggle="offCanvasLeft">
                <div class="one"></div>
                <div class="two"></div>
                <div class="three"></div>
            </a>
        </li>
        <li><a href="#" class="logo"><img src="media/rsz_lucidity-logo.png"></a></li>
    </ul>
  <p class="content"> lorum ipsum </p>
  </body>

CSS

.bgvid-back {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
} 

.bgvid {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}

@media (max-width: 767px) {
.bgvid-back {
    background: url("media/skyline.jpg") center center / cover no-repeat;
}

.fullscreen-bg__video {
    display: none;
}
}
.content {
background-color: #313638;
margin: 100vh 0 0 0;
width: 100vh;
}

这就是atm的样子：

vid shows in fullscreen as background

when scrolled down can see content but there is a large gap although margin-top: 100vh

提前感谢您的帮助:)

我对 css 有点陌生，所以如果这很明显，请道歉。

【问题讨论】：

1.你的形象不工作。直接上传到这里。 2.在你的html中没有.content div。请针对您的问题进行有效的 sn-p（在您的编辑器中有一个带有 <> 标志的按钮
@MihaiT 对不起，我忘了我改变了那个 div。还重新上传了图片。这样更好吗？
您还有一个菜单，这很可能是向下推.content，因为边距将从.menu 开始，而不是body。

标签： html css video fullscreen

【解决方案1】：

因此，您的内容在其上方有巨大差距的原因是菜单将100vh 上边距向下推。要修复它，您需要添加类似以下 CSS 的内容：

ul.menu {
  position: absolute;
  top: 0;
}

添加后，您的内容应该会正常运行。告诉我进展如何！

【讨论】：