<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Height:100vh doesn't work correctly with content in the div</title>
</head>
<style type="text/css">
.intro { color: #fff;height: 100vh; background: url('yourimage.jpg') no-repeat center center; background-size: cover; position: absolute;bottom: 2em; }
p.hello {margin: 30px; }
.page1 {color: #fff; height: 100vh; background: beige; }
.page2 {color: #fff; height: 100vh; background: black; }
</style>
<body>
<div class="container">
<div class="row">
<div id="intro" class="intro">
<div class="text-center">
<p class="hello">
Intro text is coming soon!
</p>
<div class="col small-col-12 intro--buttons">
<p>
Buttons coming here.
</p>
</div>
</div>
</div>
<div id="page1" class="col col-12 page1">
<p>Tekst test</p>
</div>
<div id="page2" class="col col-12 page2">
<p>Tekst test.</p>
</div>
</div>
</div>
</body>
</html>
