Categories
css height html

How to make a div 100% height of the browser window

2537

I have a layout with two columns – a left div and a right div.

The right div has a grey background-color, and I need it to expand vertically depending on the height of the user’s browser window. Right now the background-color ends at the last piece of content in that div.

I’ve tried height:100%, min-height:100%;, etc.

5

602

If you want to set the height of a <div> or any element, you should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100% 🙂

Here is an example:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

6

  • 125

    Correct me if I’m wrong, But i think you also need to set the height to all the parents of the div, to actually work

    – Dany Y

    Mar 28, 2013 at 11:05

  • This won’t work if I am using continuing design: page 6000px height, with blocks representing pages. I want one block to be exactly the viewport’s height.

    – Qwerty

    Dec 21, 2013 at 20:31

  • @DanyY, you are right. You do need to set the height to all the parents of the div, with the implications of everything having the height of the screen. Here is an example.

    – toto_tico

    Jan 2, 2014 at 7:31

  • This trick work for some cases but it wouldn’t for some cases too, If you search for compatibility or more recommended way, you can view @James’s Answer above 🙂 Using Viewport Percentage Method 🙂 , That’s should work too. cheers

    Feb 19, 2014 at 6:00

  • 8

    @Qwerty, here’s the solution. Set css as so: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. So if you have 3 sections, it will be html { height: 300%; } body { height: 100%; } #div { height: 33.3% }

    Mar 12, 2014 at 11:55

306

If you’re able to absolutely position your elements,

position: absolute;
top: 0;
bottom: 0;

would do it.

2

  • 22

    This works by taking the element out of the document flow and cementing its bottom value to the height of its parent. This is not ideal when your content exceeds the height of its parent.

    Dec 18, 2014 at 4:23


  • 2

    That does not work, when one of it’s parents is set to position:relative and its height is not 100% of the viewport. It will adjust top and bottom to it’s next relative or absolute ancestor.

    – Seika85

    Jul 1, 2016 at 14:39