I'm struggling to design a one-page website with full-screen divs, but I can't seem to make them truly full screen. This is my first time using Bootstrap for responsiveness, and I want the background video to remain fixed while the divs take up the entire viewport upon scrolling.
<!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">
...
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;
}