Menu
I'm new here and registered because I couldn't find my answer in the existing treads.
I'm trying to make a one-page website, and I want the 'landing page' to have a full background. I had the background on the whole page, but when I started placing text in the div, it broke. I used the following css (sass):
.intro {
color: #fff;
height: 100vh;
background: url('http://www.flabber.nl/sites/default/files/archive/files/i-should-buy-a-boat.jpg') no-repeat center center;
background-size: cover;
&--buttons {
position: absolute;
bottom: 2em;
}
}
p.hello {
margin: 30px;
}
.page1 {
color: #fff;
height: 100vh;
background: beige;
}
.page2 {
color: #fff;
height: 100vh;
background: black;
}
With the following HTML:
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>My title</title>
</head>
<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>
You can see the result here: http://codepen.io/Luchadora/full/waYzMZ Or see my pen: http://codepen.io/Luchadora/pen/waYzMZ
As you see, when positioning the intro text (p.hello {margin: 30px;}, the background size changed and is not full screen anymore. (Btw: I used an example background). Also the other pages have white spaces now..
How can I fix this? I've read articles about viewports, but I think the only thing I need for this is height: 100vh;, right? Thanks in advance!
829
Why does 100vh Issue Happen on Mobile Devices? I investigated this issue a bit and found out the reason. The short answer is that the browser's toolbar height is not taken into account. If you want to go deep on why this happens, I found this Stack Overflow thread very helpful.
Setting min-height to 100% on both elements does not allow the body element to fill the page like you might expect. If you check the computed style values in dev tools, the body element has a height of zero. Meanwhile, the HTML element has a height equal to the visible part of the page in the browser.
The state-of-the-art way Sure! Applying min-height: 100vh to the body element should do the trick. Here, 100vh means that the initial body height will take 100% of the viewport height, whereas the use of min-height instead of height will let the body element grow even more if necessary.
100% is 100% width/height of its parent width/height. And 100vh is not means 100% unless its parent is 100vh height.
Your problem is with margin collapsing:
Parent and first/last child
If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
To solve your problem, add some padding to .text-center:
.text-center {padding:1px;}
Updated pen
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
