I'm using Win XP and have noticed this on Firefox, Chrome, and IE. I
have three block elements, aligned vertically. I want the container
to have a minimum height of 600 pixels, and I would like the middle
element to take up as much vertical space as possible. Right now,
this isn't happening, as illustrated by this JSFiddle -- http://jsfiddle.net/XAYWZ/ . Problem is, even if I specify height:100% for the middle element,
it doesn't expand to fill the space. Here is the HTML ...
> I'm using Win XP and have noticed this on Firefox, Chrome, and IE. I
> have three block elements, aligned vertically. I want the container
> to have a minimum height of 600 pixels, and I would like the middle
> element to take up as much vertical space as possible. Right now,
> this isn't happening, as illustrated by this JSFiddle -- http://jsfiddle.net/XAYWZ/ > . Problem is, even if I specify height:100% for the middle element,
> it doesn't expand to fill the space. Here is the HTML ...
> Anyone know how I can adjust my CSS so that the middle panel takes up
> as much vertical space as possible?
> Thanks, - Dave
I'm pretty likely to be corrected, but I understand that you simply can't set height to be 100%, and if you could, you'd be setting it to 100% of the container's *width*. Given that a web page can have arbitrary height, I'm not even sure what 100% height would mean.
Containers (as I understand it) take their height from what they are asked to contain, unless you set a specific height (e.g in px).
In article <MPG.298d06f38343aeb5989...@news.demon.co.uk>,
Philip Herlihy <bounceb...@you.com> wrote:
...
> I'm pretty likely to be corrected, but I understand that you simply > can't set height to be 100%, and if you could, you'd be setting it to > 100% of the container's *width*. Given that a web page can have > arbitrary height, I'm not even sure what 100% height would mean.
> Containers (as I understand it) take their height from what they are > asked to contain, unless you set a specific height (e.g in px).
Yes, containers can take their height from the contents and they can instead be given a height. Some containers have zero height in spite of having very substantial content, as when their children are floats and therefore 'out of the flow'.
But you can set height to be 100% to most if not all elements and it is done often enough to good effect. It means that the element (including its baggage of borders, paddings, margins) is as high as the content height of its parent.
Where people want to make their elements stretch the full height of their viewports, they need to tell *all* the relevant hierarchy of elements what heights they should be. No good giving just the third div below a percentage height for this. What is needed is
html, body, div {height: 100%;}
<html>
<body>
<div>
<div>
<div>
I want to stretch the full height of the viewport
</div>
</div>
</div>
</body>
</html>
What could the HTML element be a percentage of? Good question, even if I say so myself. There is a little obscurity or slightly uncertain bit of the specs on containing blocks but it turns out that the HTML element is not quite the god it thinks it is. I stopped being so religiously in awe of it when I found out that it could be dependent (a *dependent* god? c'mon!). It can be made to climb on a little platform at the crack of a whip.
It will be 100% of the *the viewport*.
And the viewport is under the control of the user's hardware, medium, his or her choices etc. A bit like God seems to be when you look around the world and read a bit of history.
If you are not convinced that the HTML is basically just a circus animal like the rest of the human gods, try this in Safari or Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>At the crack of a whip</title>
<style type="text/css">
html {border: 1px dotted; height: 50%; width: 50%; margin: auto;}
</style>
</head>
<body>
</body>
</html>
> In article <MPG.298d06f38343aeb5989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@you.com> wrote:
> ...
> > I'm pretty likely to be corrected, but I understand that you simply > > can't set height to be 100%, and if you could, you'd be setting it to > > 100% of the container's *width*. ...
> Yes, containers can take their height from the contents and they can > instead be given a height. ...
> But you can set height to be 100% to most if not all elements and it > is done often enough to good effect. It means that the element > (including its baggage of borders, paddings, margins) is as high as > the content height of its parent.
...
The great benefit of spouting well-meaning but unintentionally wrong tosh is that in the best of newsgroups those misapprehensions are quickly and courteously extinguished! Thanks indeed to dorayme!
In article <56933e3f-8a04-4d05-b491-75aa0776d...@f14g2000yqe.googlegroups.com>,
laredotornado <laredotorn...@zipmail.com> wrote:
> I'm using Win XP and have noticed this on Firefox, Chrome, and IE. I
> have three block elements, aligned vertically.
Perhaps, more clearly or relevantly, you have at present four coloured blocks, orange with "Tab Bar" as text, grey with "Content" as text, pink with some buttons and lots of yellow with nothing.
> I want the container
> to have a minimum height of 600 pixels,
which it has.
> and I would like the middle
> element to take up as much vertical space as possible.
Which is the middle element, the grey content? And if it did take up the space you want, you want the yellow to disappear I guess.
> I'm using Win XP and have noticed this on Firefox, Chrome, and IE. I
> have three block elements, aligned vertically. I want the container
> to have a minimum height of 600 pixels, and I would like the middle
> element to take up as much vertical space as possible. Right now,
> this isn't happening, as illustrated by this JSFiddle -- http://jsfiddle.net/XAYWZ/ > . Problem is, even if I specify height:100% for the middle element,
> it doesn't expand to fill the space. Here is the HTML ...
> Anyone know how I can adjust my CSS so that the middle panel takes up
> as much vertical space as possible?
> Thanks, - Dave
I believe that the grey/silver .tabContent is to be set at min-height:600px; and not productDetailsPanel which is intended to have the specified min-height and expand beyond to whatever height it will have depending on the content (height:auto). So, make these changes:
> You might some ideas of a different way by jsfiddling with
jsFiddle is interesting and probably suitable for simple things, but untrustworthy IMHO. I made some changes and they did not take, but with my html editor it did. :/
Regarding your version, try adding text to your .tabContent and see what happens once it goes beyond the 600px min-height. Compare it to what I suggested.
In article <jg1g8u$uu...@dont-email.me>,
Gus Richter <gusrich...@netscape.net> wrote:
> On 1/27/2012 8:13 PM, dorayme wrote:
> > You might some ideas of a different way by jsfiddling with
> jsFiddle is interesting and probably suitable for simple things, but > untrustworthy IMHO. I made some changes and they did not take, but with > my html editor it did. :/
> Regarding your version, try adding text to your .tabContent and see > what happens once it goes beyond the 600px min-height.
I see! But is there not *some* value in delighting enquirers with directions that appear not to have faults, and then putting them though a searing and confounding process to discover the perfect solution with them coming out of the process forged as if in steel?
People who go through my solutions, Gus, have won many medals on the battlefield, more than average. Why, only the other day, a former student of mine, now a soldier, won a VC for storming a bunker... (as it turned out, the bunker was just a holding bay for pack donkeys used by the enemy, it was rigged with a tape recorder and speakers emitting sounds of heavy rifle fire .. but never mind...)
> Compare it to > what I suggested.
Yes, true. I won't try to resurrect mine. I notice that, with mine, if anyone wanted to have fixed height, they can overflow: auto; on .tabContent. Now and again people want such things.
Perhaps the OP will be happy to have the content rather than the whole at the min-height of 600px, he should be unless he has a some very special reasons.
On 2012-01-27, Philip Herlihy <bounceb...@you.com> wrote:
[...]
> I'm pretty likely to be corrected, but I understand that you simply > can't set height to be 100%, and if you could, you'd be setting it to > 100% of the container's *width*.
There is a rule like for that margins and padding-- percentages are of
the containing width, even for top and bottom margins and padding. But
not for height.
> Given that a web page can have arbitrary height, I'm not even sure
> what 100% height would mean.
Normally the height of a block depends on its contents. So asking for
the contents to be some percentage of that height is circular and the
spec says to ignore it in that case ("treat it as 'auto'"). But if the
height doesn't depend on the contents (i.e. because you set it
explicitly to say 200px) then percentages of it are required to work.
Of course heights have to be resolvable all the way up the tree, which
is why you often see:
html, body {height: 100%}
(The viewport, which is the container for the html has a fixed height--
whatever size the user made their window).
> Containers (as I understand it) take their height from what they are > asked to contain, unless you set a specific height (e.g in px).
Your instinct is right, but the cases that can work have to. CSS has a
kind of "do what I mean" mentality.
Even the circular case (percentage height of container whose height
depends on contents) "works" in some bizarre way for table cells in
table rows in quirks mode in most browsers. But don't use it.
> In article <MPG.298d06f38343aeb5989...@news.demon.co.uk>,
> Philip Herlihy <bounceb...@you.com> wrote:
> ...
>> I'm pretty likely to be corrected, but I understand that you simply >> can't set height to be 100%, and if you could, you'd be setting it to >> 100% of the container's *width*. Given that a web page can have >> arbitrary height, I'm not even sure what 100% height would mean.
>> Containers (as I understand it) take their height from what they are >> asked to contain, unless you set a specific height (e.g in px).
> Yes, containers can take their height from the contents and they can > instead be given a height. Some containers have zero height in spite > of having very substantial content, as when their children are floats > and therefore 'out of the flow'.
> But you can set height to be 100% to most if not all elements and it > is done often enough to good effect. It means that the element > (including its baggage of borders, paddings, margins) is as high as > the content height of its parent.
Only if the parent's content height doesn't depend on the height of the
child. There is aone case where that's true even when the parent does
have auto height, and that's when the child is absolutely positioned
(since in that case it has no effect on its parent's content height).
> On 2012-01-27, Philip Herlihy <bounceb...@you.com> wrote:
> [...]
> > I'm pretty likely to be corrected, but I understand that you simply > > can't set height to be 100%, and if you could, you'd be setting it to > > 100% of the container's *width*.
> There is a rule like for that margins and padding-- percentages are of
> the containing width, even for top and bottom margins and padding. But
> not for height.
> > Given that a web page can have arbitrary height, I'm not even sure
> > what 100% height would mean.
> Normally the height of a block depends on its contents. So asking for
> the contents to be some percentage of that height is circular and the
> spec says to ignore it in that case ("treat it as 'auto'"). But if the
> height doesn't depend on the contents (i.e. because you set it
> explicitly to say 200px) then percentages of it are required to work.
> Of course heights have to be resolvable all the way up the tree, which
> is why you often see:
> html, body {height: 100%}
> (The viewport, which is the container for the html has a fixed height--
> whatever size the user made their window).
> > Containers (as I understand it) take their height from what they are > > asked to contain, unless you set a specific height (e.g in px).
> Your instinct is right, but the cases that can work have to. CSS has a
> kind of "do what I mean" mentality.
> Even the circular case (percentage height of container whose height
> depends on contents) "works" in some bizarre way for table cells in
> table rows in quirks mode in most browsers. But don't use it.
