ansaurus

Question

Answer 1

A:

It's hard to mix dimensions particularly vertically with CSS. The navbar is 2 ems high and the menu is 100% - 2ems high - this last height is difficult to do with pure CSS. You may need to calculate it with JavaScript.

An alternate solution is to make the page behave like a normal webpage was designed to do (all scroll in one piece). Here is an example layout that might help: Left menu layout (em widths)

Matthew James Taylor 2009-03-27 00:03:35

for various reasons I can't do this, as much as I would like to. The set of requirements is fixed.

alumb 2009-03-27 00:11:42

Answer 2

+2 A:

The solution is easy. Use absolute positioning.

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#NavBar {
}


#Menu, #Content {
    position: absolute;
    top: 3em;
    bottom: 0;
    overflow: auto;
}

#Menu {
    width: 10em;
}

#Content {
    overflow: hidden;
    left: 10em;           /* #menu.width */
    right: 0;
}

iframe {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
}

For IE to work, make sure you set your doc type. For example, insert this at the top of your HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

strager 2009-03-27 00:07:23

Doesn't work. You end up with this: http://lynet.ca/~alumb/strager.html

alumb 2009-03-27 00:14:35

@alumb, Updated.

strager 2009-03-27 00:20:00

updated http://lynet.ca/~alumb/strager.html. still doesn't work.

alumb 2009-03-27 00:26:45

@alumb, One more update (overflow on body). I think the issue is caused by the iframe's borders.

strager 2009-03-27 00:44:21

@strager, I don't think I'm seeing what you are seeing. I see this: http://lynet.ca/~alumb/strager.jpg. The word 'bottom' should be at the bottom of the page. I also updated the strager.html file. Thanks for helping.

alumb 2009-03-27 00:53:29

@alumb, Grr, I wasn't testing in IE as I should have been. Updated answer.

strager 2009-03-27 01:21:45

@strager, ok, Now I'm getting some weird problem where in IE6, the iframe disappears completely if its position is set to absolute.

alumb 2009-03-27 03:25:30

@strager, This is a hasLayout problem. I have to set the height and width of #content and body. however, the iframe's 100% height is still relative to the body and not #container thus overflowing the page.

alumb 2009-03-27 03:56:03

ansaurus

tags:

views:

answers:

2 column full height layout in IE6

related questions