CSS: Display responsive div with 100% height in a browser

If you need to create div’s that are responsive in height and plus they cover the entire height of the browser, here is a little snippet to create this using css.

On your css:

.page-slider{margin:0;padding:0;display:block;width:100%;height:100vh;float:left;overflow:hidden;}
#page-1{background:#cc0000;}
#page-2{background:#00FF15;}
#page-3{background:#004CFF;}

On your Html:

<section id="page-1" class="page-slider">
<div class="content">This Is Page 1</div>
</section>

<section id="page-2" class="page-slider">
<div class="content">This Is Page 2</div>
</section>

<section id="page-3" class="page-slider">
<div class="content">This Is Page 3</div>
</section>

View Demo
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>