Click here to Skip to main content
15,860,859 members
Articles / Web Development / HTML5
Tip/Trick

Vertical Stretch 100% in HTML5/CSS3

Rate me:
Please Sign up or sign in to vote.
4.92/5 (7 votes)
3 Oct 2011CPOL 93.7K   8   6
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
HTML
<!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>
    <div id="container">
	DEMONSTRATION OF DIV HEIGHT:100%
	THIS GREEN RECTANGLE SHOULD STRETCH VERTICALLY 100%
     </div>
  </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
HTML
<!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>
    <div id="container">
	DEMONSTRATION OF DIV HEIGHT:100%
	THIS GREEN RECTANGLE SHOULD STRETCH VERTICALLY 100%
     </div>
  </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[^]).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Engineer
United States United States
Dr. Alexander Bell (aka DrABell), a seasoned full-stack Software (Win/Web/Mobile) and Data Engineer holds PhD in Electrical and Computer Engineering, authored 37 inventions and published 100+ technical articles and developed multiple award-winning apps (App Innovation Contests AIC 2012/2013 submissions) Alexander is currently focused on Microsoft Azure Cloud and .NET 6/8 development projects.

  1. HTML5/CSS3 graphic enhancement: buttons, inputs
  2. HTML5 Tables Formatting: Alternate Rows, Color Gradients, Shadows
  3. Azure web app: Engineering Calculator VOLTMATTER
  4. Azure: NYC real-time bus tracking app
  5. Quiz Engine powered by Azure cloud
  6. 'enRoute': Real-time NY City Bus Tracking Web App
  7. Advanced CSS3 Styling of HTML5 SELECT Element
  8. Aggregate Product function extends SQL
  9. YouTube™ API for ASP.NET

Comments and Discussions

 
GeneralExcellent tip. Works with iframes too. Pin
cmschick14-Sep-11 17:52
cmschick14-Sep-11 17:52 
GeneralRe: Yes, it should. Thanks for your input! Kind regards - AB Pin
DrABELL15-Sep-11 4:23
DrABELL15-Sep-11 4:23 
GeneralReason for my vote of 5 short, sweet, fun and pretty cool. Pin
Jenny Quinn13-Sep-11 3:13
Jenny Quinn13-Sep-11 3:13 
GeneralRe: Thanks a bunch! :) Pin
DrABELL13-Sep-11 3:36
DrABELL13-Sep-11 3:36 
GeneralReason for my vote of 5 Seems like a good way! Pin
Francis Boudreau13-Sep-11 2:33
Francis Boudreau13-Sep-11 2:33 
GeneralRe: Thanks! Pin
DrABELL13-Sep-11 2:53
DrABELL13-Sep-11 2:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.