CSS: Set Div height to 100% - Pixels

Question

I have a header on my page which is just over 100px (111px to be exact) The div below it needs to extend to the bottom of the viewport, as if i had set the bottom to 0px. The problem lies in the fact that i cannot specify top and bottom in ie6 (bug).

I can either specify top: 111px or bottom: 0px, but i still need the height to be correct ie. 100% -111px, according to the size of the viewport.

Can't seem to get expressions working coz that seems to be the solution

Here's my css code:

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

Any suggestions?

{ position: absolute; width: 200px; top: 111px; bottom: 0px; } this works in ie8, thats what i want. however ie6 takes only your first alignment (top in this case). Therefore the browser does not automatically set the required height. my solution was to set either top: 111px or bottom:opx and then assign the required height. if it's any difference, this only needs to work for internet explorer 6 upwards (not firefox, opera etc.) — moonblade, Sep 02 '09 at 09:20
Inline code, put in `\``. For block code (not comments) indent every line by four spaces. — Eric, Sep 02 '09 at 10:03
hmm i think i'm just going to use javascript. unless anybody has a better idea? — moonblade, Feb 23 '11 at 15:17
used javascript to resolve my issue, thanks to everybody that contributed — moonblade, Feb 23 '11 at 15:17
I think my CSS solution is fixed. Applying z-index was enough to sort it out. — Eric, Feb 23 '11 at 15:17
I think I've got my CSS solution working. All it was missing was a `z-index`. — Eric, Feb 23 '11 at 15:17
"Answer your own question" so the next person can see what you did. — Peter J, Feb 23 '11 at 15:17
possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — Liam, Feb 19 '14 at 11:04

score 27 · Answer 1 · answered Feb 14 '15 at 18:38

27

The best way to do this is to use view port styles. It just does the work and no other techniques needed.

Code:

div{
  height:100vh;
}

<div></div>

answered Feb 14 '15 at 18:38

Blaise M.

565
1
8
17

As usual, needs a word of caution when using in IE. http://caniuse.com/#feat=viewport-units – user3526 Aug 02 '15 at 06:22

score 22 · Answer 2 · answered Sep 04 '09 at 15:25

I added the height property to the body and html tags.

HTML:

<body>
<div id="wrapper">
 <div id="header">header</div>
 <div id="content">content</div>
</div>

CSS:

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    height: 100%;
    min-height: 100%;
}
#header
{
    height: 111px;
}

score 6 · Answer 3 · answered Sep 04 '09 at 15:05

6

Alternatively, you can just use position:absolute:

#content
{
    position:absolute;
    top: 111px;
    bottom: 0px;
}

However, IE6 doesn't like top and bottom declarations. But web developers don't like IE6.

answered Sep 04 '09 at 15:05

Eric

95,302
53
242
374

thats exactly what i had, and as you have mentioned IE6 doesn't like both used at the same time. I agree with you, but thats how the client wants it. had to write javascript to get it right – moonblade Sep 09 '09 at 09:14
`top` and `bottom` multiple position declarations don't work on *any* browser – Kyle Cureau Oct 28 '10 at 06:16
many apologies! You're right. And I did a quick test without `position: absolute`. My vote's locked in, darnit. Someone upvote this guy and correct my evil ways :) – Kyle Cureau Oct 28 '10 at 09:44
5

hahahahahahahahahahahahaahah. BEST COMMENT EVER: "IE6 doesn't like top and bottom declarations. But web developers don't like IE6." man oh man. Thanx for making my day. – Martin Andersson Nov 30 '13 at 08:28

score 6 · Answer 4 · answered Aug 13 '16 at 13:58

6

div{
  height:100vh;
}

<div></div>

answered Aug 13 '16 at 13:58

Mohammed K. Abushawish

127
1
8

1

This solution doesn't apply to all browsers – Golinmarq Mar 06 '17 at 21:20

score 5 · Answer 5 · edited May 23 '17 at 12:34

5

Now with css3 you could try to use calc()

.main{
  height: calc(100% - 111px);
}

have a look at this answer: Div width 100% minus fixed amount of pixels

edited May 23 '17 at 12:34

Community

1
1

answered Sep 27 '13 at 00:09

RaphKomjat

186
2
4

score 5 · Answer 6 · answered Oct 25 '15 at 16:28

5

div{
  height:100vh;
  background-color:gray;
}

<div></div>

answered Oct 25 '15 at 16:28

Mohit Sharma

51
1
1

score 1 · Answer 7 · answered Sep 02 '09 at 09:03

1

I'm guessing that you are trying to get sticky footer

answered Sep 02 '09 at 09:03

n1313

20,555
7
31
46

hmm not exactly that but sort of along those lines. i have a header so i adjusted the css accordingly but the div is too big, still getting set to 100% – moonblade Sep 02 '09 at 09:11

Eric · Answer 8 · 2009-09-04T15:01:22.570

Negative margins of course!

HTML

<div id="header">
    <h1>Header Text</h1>
</div>
<div id="wrapper">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
        ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus 
        vel quam et quam congue sodales.
    </div>
</div>

CSS

#header
{
    height: 111px;
    margin-top: 0px;
}
#wrapper
{
    margin-bottom: 0px;
    margin-top: -111px;
    height: 100%;
    position:relative;
    z-index:-1;
}
#content
{
    margin-top: 111px;
    padding: 0.5em;
}

score 0 · Answer 9 · answered Dec 29 '15 at 07:02

100vh works for me, but at first I had used javascript (actually jQuery, but you can adapt it), to tackle a similar problw.

HTML

<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="content">content</div>
  </div>
</body>

js/jQuery

var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");

Alternately, you can just use 111px if you don't want to calculate headerHeight.

Also, you may want to put this in a window resize event, to rerun the script if the window height increases for example.

CSS: Set Div height to 100% - Pixels

9 Answers9

HTML

CSS

Linked