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[2]: [css-d] simple problem - difficult solution
Tuesday, August 30, 2005, 10:00:05 AM, andrew welch wrote: Hmmm why does html and body need a height? That is surely a hack. Explanation: http://www.quirksmode.org/css/100percheight.html 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. Try this: http://www.456bereastreet.com/lab/cssframes/ You can take out the footer and adjust values accordingly. Steve -- http://mrclay.org/ : http://frenchhorns.mrclay.org/ __ 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/
[css-d] simple problem - difficult solution
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. __ 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/
