DIVs won't stretch all the way down to the bottom of the page?

Question

I apologize if this is a trivial question but I can't seem to figure it out. I have this website and I need the navigation bar on the side, and the rectangle all the way on the right (The one with the "ContentExtender" class) to stretch down to the bottom of the physical page (well, the ContentExtender only needs to stretch as far as the content so it blends, but that's another story). What is the simplest way to do this? I looked it up and found setting the Body's height to 100% should work, but it didn't. I know that's a lot of code to look through, so here is the actual important parts of the code (anything prefixed with "cc" was just an easy way of commenting them out):

.ContentExtender {
    background-image: url(bgblack.png);
    min-height: 10px;
    ccmin-width: 200px;
    ccwidth:100%;
    margin: 0px 0px 0px 1010px;
    position: absolute;
    top: 110px;
    right: 0px;
    left: 0px;
}
.MainParent {
    position: absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom: 0px;
    background-color:rgba(70,70,70,.7);
    min-height: 600px;
    min-width: 1000px;
    max-width: 1000px;
    height: 100%;
    margin: 0px 10px 0px 10px;
    z-index:100;
    overflow: hidden;
}

Yeah, I edited it after I put the link, then forgot to update the link, my apologies — Oztaco, Mar 20 '13 at 01:22
you have unnecessary tables. of which one of them is wrapping your sidebar. tables are evil. — He Hui, Mar 20 '13 at 01:49
It was easier to just use tables then figure out how to use DIVS correctly for that portion, but it doesn't affect the rest of the page though — Oztaco, Mar 21 '13 at 22:30

score 0 · Answer 1 · answered Mar 20 '13 at 01:15

0

You need to give html, body { height: 100%; } plus make any other parents of the element you want to have height: 100%;, height: 100%;

answered Mar 20 '13 at 01:15

dezman

18,087
10
53
91

I already tried that, it just sets it to the size of the viewable area instead of the whole page – Oztaco Mar 20 '13 at 01:19
Well, then your page is not as tall as your screen, but it is still at 100%. You can make anything in your page `height: 9999px` and you will see. – dezman Mar 20 '13 at 01:21
The page is much taller than the screen, but the navigation bar and the ContentExtender only stretch down as far as the screen goes? – Oztaco Mar 20 '13 at 01:24

score 0 · Answer 2 · answered Mar 20 '13 at 01:17

0

I recently had a problem where I could not extend to the top of the window, which may be similar. I set:

body {
  margin: 0px;
}

In your case, it may be another element. I have seen where all possible elements are intentionally set to a 0 margin, and then the margins desired are re-implemented.

answered Mar 20 '13 at 01:17

Lurk21

2,307
12
37
55

I already have my body set to that, and setting them all to 0px; didn't seem to work – Oztaco Mar 20 '13 at 01:21

score 0 · Answer 3 · answered Mar 20 '13 at 01:20

seems like there's a small error in your code try editing your

.ContentExtender

and change it to

#ContentExtender

Then you will be able to fix it, if this method doesn't work try setting the background CSS on the HTML tag of the Content extender like below

html{
height:100%;    
background:#ccc url(bgblack.png);

}

the above is an example, so please improvise

score 0 · Answer 4 · edited May 23 '17 at 12:28

0

Your issue is linked to the fact that a child div cannot directly dictate the behaviour of a parent.

Try one of these on your parent div:

overflow: auto;

display: table;

Or in the child div:

display: table-row;

When you try it, experiment with omitting the "height: blabla" attribute.

Similar problem solved: [1]: CSS - Expand float child DIV height to parent's height

edited May 23 '17 at 12:28

Community

1
1

answered Mar 20 '13 at 02:06

Aleksander S

368
1
10

Whenever I did that, it just pushes everything apart, like puts huge gaps between all of my navigation bar links – Oztaco Mar 21 '13 at 22:31

DIVs won't stretch all the way down to the bottom of the page?

4 Answers4