How To Make a HTML element the full height of any screen ( Even without content ) with only CSS!

there are good methods for doing this and There are two ways in this post .

First Method :

use height 100% for body and html

To do this, you need just to add below css for body and html

  html , body {
height:100%;
}

then add height 100% for each element that you want to show fullscreen for your users

  .section1 {
height:100%;
}

html structure like this

  <html>
    <body>
        <section class="section1">
                    <!-- Even without content -->
        </section>
  </body>
</html>

Second Mehtod :

using height 100vh

With vh, we can size elements to be relative to the size of the viewport for example, if you want to make an element the full height of the viewport, just you need add this : height:100vh;

  .section1 {
height:100vh;
}

note: in this mehtod, You do not need to add height:100vh for html and body.


867 0 0