Body height dependend screen resolution

Nico,
it was in reference to Ryan’s post above mine.

At first we were confused on what exactly you wanted. Looking at the image you posted, we would probably call that a “scrolling div” or sometimes “css frames” (they look like frames but aren’t… instead they are created via CSS).

Newbies often don’t know jargon names like “overflow/scroll box”, “sticky footer” etc. They are names for certain techniques that you only pick up over time usually.

I’m confused again:

But in all my simplicity I thought the maincontainer is inside the body. So if I make the body less height then my maincontainer is less height as well. But I understand now that was wrong thinking.

Maincontainer certainly IS in the body, yes.

But the body is a sort special container. It sometimes has rules that other, regular boxes don’t.

Also, if you have two regular boxes:
<div id=“foo”>
<p>stuff…</p>
<div id=“bar”>
<p>more stuff…</p>
</div>
</div>

If #bar has some set height like 10em, then #foo naturally must be bigger (or at least as big) but if #foo had started out really really big, like height: 20em; then you’d have

#foo {
height: 20em; (em ~= the size of “m”)
}
#bar {
height: 10em;
}

If later you make #foo smaller, #bar does not change. Though you won’t be able to make #foo smaller than #bar. But if
#foo {
height: 13em;
}

#bar doesn’t shrink too.

maar ik (wij) begrijp(en)

You representing a group/company?

Hello,

All helped me a lot further and I know now what a sticky footer is. I will never forget.
But now I have the problem that the content is running out of the div and out of the browser viewport. Can someone tell me where I have missed the turning point? I have tried a lot: float, position absolute, relative, fixed, bottom 0, 173, -173px but nothing solves my problem. I add the css+html file to see what I mean and you can also see it on http://test.nicovandekamp.nl

Thanks in advance.

Nico

Hi,

You are making big logic errors with your code.

If you have an absolute element that you have set to top:150px and then you give it 100% height it will then always be 150px too big for wherever you place it. You cannot use 100% height in this way.

For absolute elements you can set the top and bottom co-ordinates to create the height you need.

e.g.


#contentwrapper{
    position:absolute;
    background:#ffffcc;
    width:840px !important;
/* height removed*/
   [B] top:153px;
    bottom:173px;[/B]
    overflow:hidden;
}
#contentcolumn{
    margin-left: 200px; /*Set left margin to LeftColumnWidth*/
    overflow:auto;
    padding:10px;
    border: 2px solid #aaa;
 [B]   /*height:100%;   remove*/[/B]
   [B] position:absolute;
    top:0;
    left:0px;
    bottom:0;[/B]
    display:block;
}


Of course that doesn’t address Ie6 as it doesn’t understand top and bottom when specified together so I hope you don’t want support for ie6 as it will get very complicated.