Re: [css-d] simple problem - difficult solution
Ron Adams wrote: I have 2 divs on a page, and the top one is an unknown size, the bottom one must fill the rest of the space to the bottom of the browser window. How do I do this with CSS? A simplyfied example below. You can't. Divs expand to the height of their content (plus padding and margins), and no further. To fill a space, you need to put something of that height inside the div, or set the div to that explicit height. If you don't know the height, find a JavaScript script to do it for you. Our WIKI has examples: http://css-discuss.incutio.com/ -- Bob Easton Accessibility Matters: http://access-matters.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple problem - difficult solution
On 8/30/05, Bob Easton [EMAIL PROTECTED] wrote: Ron Adams wrote: I have 2 divs on a page, and the top one is an unknown size, the bottom one must fill the rest of the space to the bottom of the browser window. How do I do this with CSS? A simplyfied example below. You can't. Divs expand to the height of their content (plus padding and margins), and no further. To fill a space, you need to put something of that height inside the div, or set the div to that explicit height. If you don't know the height, find a JavaScript script to do it for you. Our WIKI has examples: http://css-discuss.incutio.com/ This is a real issue and one that should have been addressed by the CSS spec. Setting a table to 100% high in IE in quirks mode makes the table the height of the screen, a really useful feature. This isn't available in standards mode, and there is *no* equivalent in a tableless design. Why is there a need to supply a fixed value height at some point in the hierarchy - why not just take the hight of the body as the fixed value? (And, it certainly doesn't work to specify html, body { height: 100% } - that's just silly - since when should the html tag need a height?) Does anyone know the spec authors reasoning behind not making this possible without javascript? Isn't it considered bad form to use anything other than CSS to format the output? It seems to me to a big a hole in the spec. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] simple problem - difficult solution
This[1] is a real issue and one that should have been addressed by the CSS spec. Setting a table to 100% high in IE in quirks mode makes the table the height of the screen, a really useful feature. This isn't available in standards mode, and there is *no* equivalent in a tableless design. No need for quirks mode, I don't think. Set html,body{height:100%} (as well as your table) and you should be good to go in standards mode. I'll let others reply to the more specific height details of CSS, as I can get it working but don't understand it as well as I'd like to. [1] making page content full height of the screen without hard coding height. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple problem - difficult solution
No need for quirks mode, I don't think. Set html,body{height:100%} (as well as your table) and you should be good to go in standards mode. Hmmm why does html and body need a height? That is surely a hack. I'll let others reply to the more specific height details of CSS, as I can get it working but don't understand it as well as I'd like to. [1] making page content full height of the screen without hard coding height. Ok, I'll throw it open to the CSS experts. Two divs: divHeader/div divlots of content/div The requirement is that the header div must not scroll off the page, it should remain fixed at the top of the page. The content div will fill with content and should be scrollable vertically when needed. Constraining that contents div to the available viewport is the issue (and having it resize with the viewport) - if this is possible in a standards compliant way using only CSS I would be very thankful (and mightily impressed as I don't think it's possible). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple problem - difficult solution
At 3:00 PM +0100 8/30/05, andrew welch wrote: No need for quirks mode, I don't think. Set html,body{height:100%} (as well as your table) and you should be good to go in standards mode. Hmmm why does html and body need a height? That is surely a hack. Or, you know... not. Ok, I'll throw it open to the CSS experts. Two divs: divHeader/div divlots of content/div The requirement is that the header div must not scroll off the page, it should remain fixed at the top of the page. The content div will fill with content and should be scrollable vertically when needed. That's totally possible in CSS, and it's actually possible in two different ways. Getting it to work in browsers, though-- that's the trick. Method one basically recreates a frame set without the frame markup. It goes something like this: html, body {height: 100%;} #header, #content {position: fixed;} #header {top: 0; left: 0; right: 0; height: 50px;} #content {top: 50px; bottom: 0; left: 0; right: 0; overflow: scroll;} You could, of course, replace the '50px' values with a different one, using any unit you like, including percentages. Method two nails the header to the top of the viewport, and lets the rest of the content scroll underneath it. #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;} #content {padding-top: 50px;} Again, you're free to replace the '50px' with something else. The problem with both methods is IE/Win, which doesn't support 'fixed' on 'position', so the effect wont' be what you want. There are JS and behavioral solutions to fake support for 'position: fixed' in IE/Win, such as Dean Edwards' IE7, but I find them to be largely unsatisfactory because the element scrolls around and then jumps into place. An adapted approach is to have IE/Win absolutely position the header and just accept that it will scroll in IE/Win while remaining in place for all other modern browsers. That would be: #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;} * html #header {position: absolute;} /* for IE/Win */ #content {padding-top: 50px;} Hopefully one of those solutions will work for you. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple problem - difficult solution
Ok, I'll throw it open to the CSS experts. Two divs: divHeader/div divlots of content/div The requirement is that the header div must not scroll off the page, it should remain fixed at the top of the page. The content div will fill with content and should be scrollable vertically when needed. That's totally possible in CSS, and it's actually possible in two different ways. Getting it to work in browsers, though-- that's the trick. Method one basically recreates a frame set without the frame markup. It goes something like this: html, body {height: 100%;} #header, #content {position: fixed;} #header {top: 0; left: 0; right: 0; height: 50px;} #content {top: 50px; bottom: 0; left: 0; right: 0; overflow: scroll;} You could, of course, replace the '50px' values with a different one, using any unit you like, including percentages. Method two nails the header to the top of the viewport, and lets the rest of the content scroll underneath it. #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;} #content {padding-top: 50px;} Again, you're free to replace the '50px' with something else. The problem with both methods is IE/Win, which doesn't support 'fixed' on 'position', so the effect wont' be what you want. There are JS and behavioral solutions to fake support for 'position: fixed' in IE/Win, such as Dean Edwards' IE7, but I find them to be largely unsatisfactory because the element scrolls around and then jumps into place. An adapted approach is to have IE/Win absolutely position the header and just accept that it will scroll in IE/Win while remaining in place for all other modern browsers. That would be: #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;} * html #header {position: absolute;} /* for IE/Win */ #content {padding-top: 50px;} Hopefully one of those solutions will work for you. Ahhh I take it all back - method one is exactly what I was after. I see now why the hole is in IE not supporting fixed and not in the spec (I was approaching the problem from the wrong end). One point - is possible to only have the vertical scrollbar and not the horizontal? (overflow-y in IE) Thanks for the explanation, andrew __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] simple problem - difficult solution
divHeader/div divlots of content/div The requirement is that the header div must not scroll off the page, it should remain fixed at the top of the page. The content div will fill with content and should be scrollable vertically when needed. Anne van Kesteren post on fixed positioning with example layouts may be of interest to you? http://annevankesteren.nl/2004/07/fixed-positioning Regards, David Laakso -- David Laakso http://www.dlaakso.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/