Vertical Stretch 100% in HTML5/CSS3

DrABELL

4.92/5 (7 votes)

Sep 9, 2011

CPOL

96424

Make DIV element stretch vertically 100%. Works in all HTML5-compatible browsers

In order to stretch DIV element vertically to fit the entire screen (i.e. browser's viewable area), it's not enough just to set its CSS property height:100%, it also requires to set CSS properties of <html> and <body> elements as shown in Listing 1 below: Listing 1: Vertical stretch using CSS position:relative

<!DOCTYPE html>
<html>
  <head>
    <title>VERTICAL STRETCH | DEMO</title>
    <style type ="text/css">
      html {height:100%;}
      body {margin:0; padding:0; height:100%;}
      div#container {background-color:green; height:100%; width:60%; margin: 0 auto 0 auto;}
    </style>
  </head>

  <body>
    
	DEMONSTRATION OF DIV HEIGHT:100%
	THIS GREEN RECTANGLE SHOULD STRETCH VERTICALLY 100%
     
  </body>
</html>

Listing 1 snippet implies the default setting of: position:relative. Another alternative is to use position:absolute and set CSS properties top and bottom to 0 as shown in the following Listing 2: Listing 2: Vertical stretch using CSS position:absolute

<!DOCTYPE html>
<html>
  <head>
    <title>VERTICAL STRETCH | DEMO</title>
    <style type ="text/css">
      div#container {background-color:green; position:absolute; top:0; bottom:0; width:60%; margin-left:20%; }
    </style>
  </head>

  <body>
    
	DEMONSTRATION OF DIV HEIGHT:100%
	THIS GREEN RECTANGLE SHOULD STRETCH VERTICALLY 100%
     
  </body>
</html>

Similar results could be achieved by setting CSS position:fixed in regards to DIV element. In both cases, make sure that the property overflow-y is set correspondingly to the layout specs (either auto, or hidden, visible, scroll, etc.) to ensure proper content rendering (refer to the demo sample at: CSS overflow samples[^]).