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
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
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] Difference in 100% height between IE and standards
Thanks for the info, I've read this quite a few times before but it
doesn't work in this case.
If you take the example (without doctype) and add height:100% to body
and html, IE still works as it did before (and gives the result I
want), Firefox shows no change, Opera behaves like IE.
If I put the browsers into standards compliance mode by adding the
html 4.01 strict doctype, IE and Opera behave the same by growing the
whole table (not just the 'body section') to the height of the
viewport, whereas Firefox doesn't grow the table at all.
Please cut and pase the following code and resize the window to see
what I mean - it's really frustrating when browsers still produce
different results when in 'standards compliance' mode
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd;
!--The div with class bodyDiv should show scroll bars when content overflows--
html
head
style
html {
height:100%;
}
body {
height:100%;
overflow : hidden;
}
table {
height : 100%;
width : 100%;
}
.bodyDIV {
height : 100%;
overflow : auto;
}
.headerTR {
height : 1%;
}
/style
/head
body
table
tr class=headerTR
tdHeader Content/td
/tr
tr
td
div class=bodyDIV
pBody content/p
pBody content/p
pBody content/p
pBody content/p
pBody content/p
pBody content/p
pBody content/p
pBody content/p
/div
/td
/tr
/table
/body
/html
On 8/25/05, Michael Landis [EMAIL PROTECTED] wrote:
On 8/24/05, andrew welch [EMAIL PROTECTED] wrote:
This works with IE in quirks mode, but not in Firefox or IE in
standards mode. The problem is setting the table to 100% high - IE in
quirks mode makes that the height of the viewport, whereas IE in
standards mode and Firefox make that the height of its container. As
we don't know the exact height of the window, the table just sizes to
its contents and so no content overflows, hence no scrollbars.
example snipped/
Hi, Andrew,
You might want to see about ways to make sure that 100% is being
recognized. The issue is that a percent height only works if its
parent's height is not based upon its content (that is, as auto). If
the parent container doesn't have a defined height, percents turn into
auto.[1]
The way to get around this is by defining the heights for all parents
between window and the table. HTML, which defines the initial
containing block, can use a percentage, because its parent is the
window itself, whose height is not based upon its content.[2][3] So if
HTML is set to 100% high, it is now explicitly defined as being as
tall as the window. From there, you then define BODY as 100% high, and
that will stick because HTML's height is fully defined as the height
of the window. BODY will be as tall as the window, too. As you keep
going from child to child, setting heights to 100%, you can reach down
as far as you need until you hit the table and make it 100% high. If
everything between it and the window are set as 100% high, it will be
as high as the window too, which should give you your scrollbars.
HTH,
Michael
[1] http://www.w3.org/TR/CSS21/visudet.html#the-height-property
[2] http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
[3] http://www.w3.org/TR/CSS21/visuren.html#q2
__
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] div that resizes to height of window
Hi,
I'm trying to create the following structure:
header
body
...where the header is fixed, and the body is scrollable. The body
should resize to fill the available space. I'm trying to do it all
using HTML + CSS without javascript.
This is possible in IE apparently because IE treats 100% height incorrectly:
table {
height:100%;
}
#headerRow {
height: 1%;
}
#bodyDiv {
overflow:auto;
height:100%;
}
table
tr id=headerRow
tdHeader/td
/tr
tr
td
div id=bodyDivBody/div
/td
/tr
/table
Here the headerRow will grow to be as big as its contents because it
has a height of 1%. The table will be as big as the viewport (height
100%) and the bodyDiv will grow or shrink to whatever space is left
and provide scrollbars when needed.
This doesn't work in Firefox or apparently IE in standards compliance
mode, as at some point an actual height value needs to be supplied to
contstrain the percentage heights, otherwise the table will just grow
past the viewport height. The only way I can see to get and actual
height value is to use javascript - is this the case?
If I could get this to work with a tableless design and only css that
would be great, eg:
div id=headerHeader/div
div id=bodyBody/div
What css can you use to make #'body grow to fill the screen and
provide scrollbars when it's contents exceed it's boundaries?
thanks
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/
