CSS: Set Div height to 100% - Pixels

21
votes

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?

9
csshtmlheight
I don't see what you want reach, could you paste code ?:) – IProblemFactory
{ 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
my apologies, don't know how to show code correctly – moonblade
Inline code, put in `. For block code (not comments) indent every line by four spaces. – Eric
"Answer your own question" so the next person can see what you did. – Peter J

9 Answers

24
votes

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>
22
votes

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;
}
6
votes

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.

5
votes

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

5
votes

div{
  height:100vh;
  background-color:gray;
}
<div></div>
5
votes

div{
  height:100vh;
}
<div></div>
1
votes

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

0
votes

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;
}
0
votes

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.