Forum Moderators: not2easy
i'm fairly new to using css for layouts, i've mostly used it for font effects and text/paragraph formatting, so i'm not a complete newbie.
having said that, how do i use css to ensure that my table will always extend to the bottom of a browser window, no matter the window size or screen resolution?
any assistance is appreciated and will be rewarded with good karma.
Tip: we don't use tables for layout out here in CSS land, so I for one have little experience with CSS on tables for layout purposes. In fact I've never set height on a table in CSS at all (tabular data holding tables hardly ever call for a set height, content rules there).
what i need is a way to anchor the bottom of the table to the bottom of the browser so it fills the vertical plane... i've got an image for the page's background, and i want the table, which is colored, to fill the y-axis on the side....
[edited by: eelixduppy at 3:27 am (utc) on Jan. 29, 2009]
[edit reason] no URLs, please [/edit]
height:100% is a tricky one: it sets the height of an element to the explicitly set height of it's direct parent (become auto if the parent has no explicitly set height). The only exception is the root element: it has the height of the viewport. So to use height:100% to fill the viewport you need to set height:100% on *all* elements in between: html, body, ...
If you element starts at e.g. 200px from the top and you want to have it touch the bottom of the screen, a position:absolute solution might be used (I'm not sure how browsers react to a table being positioned): you can set both top:200px and bottom:0 to stretch the element (caution: IE6 needs scripted help to do this e.g. IE7.js adds the support needed for this)
Look at the overflow property to have a bit control over what happens if you have more content than space.
