CSS div element height and width 100% to fit browser window

By informerfrk

Share on

In this tutorial I will show you how to make the div element height and width 100% so that it will fit the browser window height and width using CSS code. This code will be very usefull for web designers who work with CSS.

How to make div element height and width 100% to fit browser window height and width?

Suppose you have a div class “fithw“. Now you want to fit the div class “fithw” with browser height and width. So what to do? Obviously you need to make the height and width 100% of the browser window height and width so that it will completely fit to the window.

CSS code to make your div element 100% of the browser window’s height and width

Here is the CSS code for making your div class “fithw” fit to the window height and width:

.fithw {
height: 100vh;
width: 100vw;
}

The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available on the window, the viewport width has a specific measure, in this case the width of the available screen, including the document margin. If you set the style body { margin: 0 }, 100vw should behave the same as 100%.

So the complete CSS code will be:

.fithw {
  height: 100vh;
  width: 100vw;
  margin: 0
}

Or you can also use the below CSS code where you don’t need to add { margin: 0 }

.fithw {
  height: 100vh;
  width: 100%;
}

That’s all you need to do to fit the div element for your browser window’s height and width. You can use any one of these two

 

Leave a Reply

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