extend div all way down

Question

Possible Duplicate:
How do I force a DIV block to extend to the bottom of a page even if it has no content?

I have a div here that i want to extend all the way to the bottom of the page.

I want to extend bottomHalf all the way down basically no matter the resolution it will just go all the way down.

I put height: 100%; in bottomHalf but its not working

  <div id="navigation">
 blah blah
  </div>


  <div id="bottomHalf">
EXTEND ALL THE WAY!!!
  </div>

CSS

#navigation {
    margin: 0 auto;
    width: 990px;
    height: 55px;
    background-image:url(images/bg.jpg);
    background-repeat:no-repeat;
}

#bottomHalf {
    margin: 0 auto;
    width: 990px;
    height: 100%;
    background-color: #4d3c37;
}

Here is a jsiddle example

http://jsfiddle.net/3J9xd/

I tried min-height:100%; height: 100%; in my wrapper and in BottomHalf but it dosent work — Eric Arsmeinz, Nov 14 '11 at 00:54
Can you make a [jsFiddle](http://jsfiddle.net/) or [JS Bin](http://jsbin.com/) test case showing what you have so far? — thirtydot, Nov 14 '11 at 01:02
I want the bottomhalf to extend all the way down to the end of the page no matter the resolution of screen ect — Eric Arsmeinz, Nov 14 '11 at 01:08
What should happen when there's too much text inside `#bottomHalf` to fit "on the screen"? Should the page then have a vertical scrollbar? — thirtydot, Nov 14 '11 at 01:11

score 2 · Answer 1 · answered Nov 14 '11 at 01:32

2

Try this.

http://jsfiddle.net/thirtydot/zTWhn/

html, body, #wrapper {
    height: 100%;
}
#wrapper {
    margin: 0 auto;
    width: 990px;
    position: relative;
}
#navigation {
    height: 55px;
    background-color: #fff;
}
#bottomHalf {
    position: absolute;
    top: 55px;
    bottom: 0;
    width: 100%;
    background-color: #4d3c37;
}

answered Nov 14 '11 at 01:32

thirtydot

224,678
48
389
349

this does not work with larger content: http://jsfiddle.net/master1991/c0hdk4re/ – Ingus Feb 15 '19 at 09:29
1

@Ingus: It's not really a case of "does not work", more like "nobody specified what should happen". You can do this, for example: http://jsfiddle.net/thirtydot/754s0vLw/1/. Or are you just trying to make a sticky footer? There's not enough detail in the original question or your comment, to be honest. – thirtydot Feb 15 '19 at 16:03
That is true! I have to make left nav bar that all the time need to be till end of the page. I have dynamic container next to nav container. – Ingus Feb 25 '19 at 07:02

GregM · Answer 2 · 2011-11-14T01:27:47.573

1

You only need to add

html, body{height:100%;}

And put the height of your div to 100%

Like this : http://jsfiddle.net/3J9xd/1/

EDIT:

Is it better like this : http://jsfiddle.net/3J9xd/5/

edited Nov 14 '11 at 01:27

answered Nov 14 '11 at 01:12

GregM

2,634
3
22
37

Now it jsut goes like 200000 pixels more than the page – Eric Arsmeinz Nov 14 '11 at 01:20
are you sure, on my side i've got 55px ... but i'm looking for another solution – GregM Nov 14 '11 at 01:24

score 0 · Answer 3 · answered Nov 14 '11 at 01:20

height: 100%; does work. you are not seeing it extend due to the height of your wrapper class. If you set the height on your wrapper class to a fixed height you will see the bottomHalf div extend.

#wrapper {
    margin: 0 auto;
    width: 990px;
    height:500px;
}

#bottomHalf {
    margin: 0 auto;
    width: 990px;
    height: 100%;
    background-color: #4d3c37;
}

extend div all way down

3 Answers3