我正在尝试创建一个单个页面网站，其中多个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;
}
尝试为您的DIV提供VH样式。例如
div {max-height：100VH;}//这将使您的Div的最大高度为100垂直高度，设置为全屏尺寸。
http://www.w3schools.com/cssref/css_units.asp
您想要的是VH单元，并为不支持它的浏览器提供后备。除非这是一个非常大的项目（通常不是那些滚动的网站），否则我会抛弃bootstrap。实际上，它做得非常糟糕。
最后一个网站我们必须这样做，我们将每个全屏元素放在li中，使用100VH大小，倒退到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;
}
如果还没有，请看现代化：
https://modernizr.com/
还要查看用于使用兼容视频格式的各种JavaScript解决方案，或者您可能会发现自己显示全屏空白屏幕。
哦，在此处插入强制性警告，了解视频纵横比与所有屏幕远程比的匹配。; - ）