Topic: Height issues ad infinitum (Page 1 of 1)

First the good news: I've been hired by a web design company here in town. (Do me a favor and DON'T look at their portfolio. I've only been here a month ) I'm working on my first full design for them and I fear I may have gone a bit too ambitious.

The concept.

The main content part i want to be elastic while the other three columns are static widths. I need basically all columns to extend to 100% page height, or document height if the content is larger than the page.

The first solution I have worked on.

The second solution is an attempt to implement this.

I'm having obvious problems with both. Have I done myself in? Any helpful pushes will be appreciated.

-SPyX

Edit: Update: I'm somewhat closer now. I'm just having background image repeat problems. The most offensive of which is the "outer" div.

(Edited by SPyX on 04-19-2006 01:18)

Well, I found a javascript solution. The only drawback is that it seems to crash IE if the window is resized small enough.

http://www.alistapart.com/articles/fauxcolumns/

Well, aquainted. There were too many background images to make that possible.

Best javascript solution:
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

Best pure CSS solution:
http://positioniseverything.net/articles/onetruelayout/

Cheers,
DC

The code I'm currently using seems much less bloated.

function resize(){  
var frame = document.getElementById("sidebar");  
var htmlheight = document.body.parentNode.scrollHeight;  
var windowheight = window.innerHeight;  
if ( htmlheight < windowheight ) { document.body.style.height = windowheight + "px"; frame.style.height = windowheight + "px"; }  
else { document.body.style.height = htmlheight + "px"; frame.style.height = htmlheight + "px"; }  
}