Recently I wanted to make a web page design extend to the bottom of the browser even if there wasn't enough content to stretch the containing element to the height of the window.
If only the HTML or CSS spec had some kind of "remainder" value for widths and heights. There was the "*" width for the width attribute of Table Cells. But we don't have anything like that any other elements. Yeah, there is "auto" on width and height but that doesn't mean "fill the remainder" unless you are working in tables. But a table has to fill the remainder so it doesn't really count.
So the solution for my specific design, and hopefully it will be helpful to you, is to wrap the page with an element (I used DIV) and then give it a height of 100%. I then used a repeating background to fill down the element to the bottom of the window.
In order to make this work properly you also need to set the HTML, BODY, and FORM element HEIGHT values to 100%. This causes these elements to always stretch to the height of the window.
You can't specify a percentage height on an element unless its parent has a height specified as well. Also, you have to be careful with margins, padding, and borders on any element that you give a 100% height. If you're having trouble with always have scroll bars even when the page is only part full then you'd gain a lot be reviewing the Box Model. Read the W3C specs.
No comments:
Post a Comment