22

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?

asked Sep 2, 2009 at 8:56
1

9 Answers 9

28

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, 2015 at 18:38
Sign up to request clarification or add additional context in comments.

1 Comment

As usual, needs a word of caution when using in IE. caniuse.com/#feat=viewport-units
22

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;
}
answered Sep 4, 2009 at 15:25

Comments

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 4, 2009 at 15:05

3 Comments

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
top and bottom multiple position declarations don't work on any browser
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 :)
6 

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

answered Aug 13, 2016 at 13:58

1 Comment

This solution doesn't apply to all browsers
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

answered Sep 27, 2013 at 0:09

Comments

5 

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

answered Oct 25, 2015 at 16:28

Comments

1

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

answered Sep 2, 2009 at 9:03

1 Comment

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%
0

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;
}
answered Sep 2, 2009 at 10:00

Comments

0

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.

answered Dec 29, 2015 at 7:02

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.