HOW TO | 3D | CODE | GAMING | PHOTO | SOUND | VECTOR | VIDEO

Create a div with a height of 100% of the browser window


When it comes to responsive web design then one of the coolest things you could use on a landing page is to make the header blend in with the banner, logo or slogan area that is just as tall as the browser window. It's quite easy to make actually.
 

Using height attribute in CSS

You might have noticed that simply giving height the value of 100% doesn't do the job. The problem is that in ordfor for it to work you have to assign height value of 100% also to html and body.

First start with giving the 100% height value to html and body.

html, body {
height:100%;
}

Next create a division as a container for the 100% height section.

.full-height {
height:100%;
}

Using viewport height in CSS

This is the easiest and shortest way to create an element that is 100% height of the viewport or browser window. Viewport height is the feature of CSS3.

<div style="height:100vh; background:#112233">This division is 100% of the viewport height</div>

100% height using HTML body and table

You can make a table with 100% height of the browser window even without the linked CSS stylesheet. You just have to add style parameters to HTML and body tags.

<html style="height:100%">
<body style="height:100%">

<table style="width:100%; height:100%; border: 1px solid #000000;" cellpadding=0 cellspacing=0>
<tr>
<td style="display:table-cell; height:100%; text-align:center; vertical-align:middle">

This table is filling 100% of the width and height of the browser window.

</td>
</tr>
</table>


Last update: 2019-01-17 (Y,M,D)