Geek Answers Handbook

CSS viewport height: 100vh does not work correctly with content in div

I am new here and registered because I could not find my answer in the existing steps.

I am trying to create a one page website and I want the "landing page" to have a full background. I had a background on the whole page, but when I started placing text in a 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; }

In 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>

The result can be seen here: http://codepen.io/Luchadora/full/waYzMZ Or look at my pen: http://codepen.io/Luchadora/pen/waYzMZ

As you can see, when positioning input text ( p.hello {margin: 30px;} the background size changed and was no longer full-screen (Btw: I used an example background). There are also spaces on other pages now.

How can i fix this? I read articles about viewports, but I think the only thing I need for this is height: 100vh; , right? Thanks in advance!

+5
source share
3 answers

Your problem is to deploy the margin :

Parent and first / last child
If there is no border, pad, inline content, or permission to separate the top edge of the field with the edge of its top first child block or without a border, padding, inline content, height, minimum height, or max. -height to separate the bottom edge of the block from the bottom border of its last child, then these fields collapse. The curled edge ends outside the parent.

To solve your problem, add the add-on to .text-center :

 .text-center {padding:1px;}

Updated pen

+4
source

You have not disconnected the edge of the body. Add this to your CSS

 body{ margin:0px; }

edit: The answer Pete wrote seems like a complete solution, sorry it was too slow!

0
source

This has already been said above in a side conversation, but it worked for me, and I want people to find it easily.

 -- overflow-x:hidden; on both html, body in the css.
-1
source

More articles:


All Articles