Question

我试图创建一个单页网站，其中有多个全屏div，但我无法将它们全屏显示。我已经使用bootstrap使网站响应，这是我第一次这样做。我想要做的是设置一个背景视频，然后当我向下滚动时，divs适合整个视口

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="imagens/logo_icone.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <title>Museu do Barro Preto</title>

</head>

<body>  
<div class="container-fluid">
                          <!--Video -->
<div class="row">
<div class="col-xs-12">
    <video class="video_bg" autoplay muted loop>
        <source src="video/prom.mp4" type="video/mp4">
        A extensão do ficheiro não é suportada pelo seu browser
    </video>
    </div>
      </div>
     <!--/Video -->

  <!--Barra de Navegação-->
    <div class="row">
    <header class="col-md-12">
        <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#texto1">Quem Somos</a></li>
            <li><a href="">Onde Estamos</a></li>
            <li><a href="">Educação</a></li>
            <li><a href="">Video</a></li>
            <li><a href="">Exposições</a></li>
      </ul>
    </div>
    </div>
        </nav>
    </header>
</div>
<!--/Barra de Navegação-->

<div class="row pag1">
    <article class="col-md-8">
        <section>
            <h1>Quem Somos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.

Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
        </section>
    </article>

    <aside class="col-md-4">
        <img src="http://www.dueceira.pt/trilhos/imgs/barro_preto_vnp2.jpg" alt="Peças Barro Preto">
    </aside>
</div>

<div class="row">
    <article>
        <aside class="col-md-4">

        <div id="mapa">

        </div>
    </aside>

        <section class="col-md-8">
                        <h1>Onde Estamos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.

Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
        </section>
    </article>
</div>

<div class="row">
    <div id="ilustracao">
        <h1>SLIDESHOW DAS ILUSTRAÇÕES</h1>
    </div>
</div>

<div id="video">
    <div id="documentario">
    <h1>Documentario</h1>
        <video class="documentario" controls>
            <source src="video/prom.mp4" type="video/mp4">
        </video>
    </div>
</div>

        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
        </script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script>

    </body>

</html>

CSS

html,body {
  height:100%;
  margin:0;
}

html>body .pag1 {
  height:auto;
}
.video_bg { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translate(-50%, -50%);
}

 .borders {
    border: 1px solid black;
 }

 .documentario {
    width: 500px;
    height: 500px;
 }

 .pag1 {
    width: 100%;
    height: 100%;
    margin-top: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
 }

 .pag1 img {
    width: 400px;
    height: 400px;
 }

Answer 1

尝试给你的div一个vh风格。如

div {max-height：100vh;} //这将为你的div提供100个垂直高度的最大高度，设置为全屏大小。

http://www.w3schools.com/cssref/css_units.asp

Answer 2

你想要的是vh单元，再加上不支持它的浏览器的后备。除非它是一个非常大的项目（那些滚动网站通常都不是），否则我就会放弃Bootstrap。实际上，它制作得相当糟糕。

我们做的最后一个网站必须表现得像那样，我们把每个全屏元素放在一个li中，用100vh调整li的大小，然后回到javascript设置的常规px单位以匹配屏幕大小，回到一个集合通过条件评论的常见屏幕分辨率。

可悲的是，使用100％使用大小调整子元素会产生很多麻烦。

这是精心设置的，但如果你这样做一次，它将为你节省大量的工作。它也是实现这一目标的唯一可靠方法。（我们通过一组使用辅助技术的用户测试我们的所有工作。）

所以实质上：

<ol>
   <li>
       'Page' content here.
   </li>
   <li>
       'Page'content here.
   </li>
</ol>


ol {
display: block;
position: relative;
width: 100%; /* Caused no issues and is better supported */
height: auto;
float: left;
}

li {
display: block;
position: relative;
width: 100%;
height: 100vh;
float: left;
}

如果你还没有看过Modernizr：

https://modernizr.com/

另请参阅各种Javascript解决方案以提供兼容的视频格式，或者您可能会发现自己显示的是全屏空白屏幕。

哦，并在此处插入强制警告，说明视频宽高比与所有屏幕宽高比不匹配。 ; - ）

创建多个全屏div

2 个答案: