August 29th, 2003, 11:41 AM
CSS Divs stretching to 100% height
Could people have a look at my site and let me know how I can get the div on the right (#rightpane) to run the full height of the page NOT just the browser window.
The CSS file can be found here.
August 29th, 2003, 12:13 PM
I had the same problem when putting pixel for the width and % as the height. I don't think you can mix and match.
I would put the contents for the DIV in a table and set the table to height to 100% and the rightpane div width to 250px
Last edited by metro; August 29th, 2003 at 12:16 PM.
August 30th, 2003, 06:47 AM
thanks for the answer. Unfortunately, I am trying not to use tables for layout on this site in an attempt to retain standards compliance. I'll have a look at using all percentages though - sounds promising.
August 31st, 2003, 02:41 PM
September 1st, 2003, 06:51 AM
i'm not sure that works.
I have no problem with the Div being the height of the viewport in either IE or Moz.
My problem occurs when the page is long enough to allow scrolling... then the div is only as high as the viewport was but doesn't stretch to fill the remaining space.
Implementing the code from the other thread doesn't fix this.
Oddly enough I had previously had exactly the same problem as detialled in the other thread but found that adding an XML declaration to the page fixed it in Moz - weird!
September 1st, 2003, 07:24 PM
You could make your body background-color: #6699cc; and add border-right: 2px #000 solid; to your content id to get the look you want.
September 5th, 2003, 05:47 AM
I believe I have experienced a similar problem. Try placing all of your layout div's (rightpane, content, mainClm, etc.) inside an extra div, maybe call it maincontainer, for which you set the height through css to be 100%. Keep your rightpane div as 100% height. See if that helps. I don't remember but you may also need to experiment with different combinations of the position attribute by setting the maincontainer to "absolute" and the rightpane to "relative" or vice versa.
Something about the nesting seems to help. Perhaps when a browser calculates the height for your rightpane div, it is setting it to be 100% of the browser window, rather than 100% of your content. You can verify this by resizing your browser window to be smaller (vertically) and then scrolling. You will see that your rightpane div will even shorter than before.
September 5th, 2003, 06:47 AM
i'm afraid I must admit defeat. I've added a bg image to the body style so it "looks" like the div streches to 100% but it doesn't. Not pretty but better than nothing.
Thanks for all the help though - i'm only just getting started in CSS for positioning so any help or references are truly useful.
September 6th, 2003, 12:02 AM
See if this site gives you any ideas.
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.
My html and css workshop
, demos and tutorials.
Ask a better question
, get a better answer.