Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
How do I get this element to expand to height = 100%?
1 view
Skip to first unread message
laredotornado
Jan 27, 2012, 9:40:34 AM1/27/12
to
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 ...
<div class="productDetailsPanel">
<div class="tabPanel">
<div class="tabBar">Tab Bar</div>
<div class="tabContent">Content</div>
<table>
<tr>
<td><button value="Save">Save</button></
td>
<td><button value="Reset">Reset</button></
td>
</tr>
</table>
</div>
</div>
and here is the CSS ...
.productDetailsPanel {
width: 74%;
min-height: 600px;
overflow-x: hidden;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 10px 0 5px;
background-color: yellow;
}
.tabPanel {
height:100%;
width: 100%;
position: relative;
background-color:pink;
padding: 2px;
}
.tabBar {
height: 2em;
background-color: orange;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 2em;
}
.tabContent {
position: relative;
top: 0px;
background-color: silver;
width: 100%;
height: 100%;
}
Anyone know how I can adjust my CSS so that the middle panel takes up
as much vertical space as possible?
Thanks, - Dave
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 ...
<div class="productDetailsPanel">
<div class="tabPanel">
<div class="tabBar">Tab Bar</div>
<div class="tabContent">Content</div>
<table>
<tr>
<td><button value="Save">Save</button></
td>
<td><button value="Reset">Reset</button></
td>
</tr>
</table>
</div>
</div>
and here is the CSS ...
.productDetailsPanel {
width: 74%;
min-height: 600px;
overflow-x: hidden;
border-color: #BBBBBB;
border-style: solid;
border-width: 1px;
margin: 10px 10px 0 5px;
background-color: yellow;
}
.tabPanel {
height:100%;
width: 100%;
position: relative;
background-color:pink;
padding: 2px;
}
.tabBar {
height: 2em;
background-color: orange;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 2em;
}
.tabContent {
position: relative;
top: 0px;
background-color: silver;
width: 100%;
height: 100%;
}
Anyone know how I can adjust my CSS so that the middle panel takes up
as much vertical space as possible?
Thanks, - Dave
Philip Herlihy
Jan 27, 2012, 3:05:45 PM1/27/12
to
In article <56933e3f-8a04-4d05-b491-
75aa07...@f14g2000yqe.googlegroups.com>, laredo...@zipmail.com
says...
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).
--
Phil, London
75aa07...@f14g2000yqe.googlegroups.com>, laredo...@zipmail.com
says...
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).
--
Phil, London
dorayme
Jan 27, 2012, 4:38:20 PM1/27/12
to
In article <MPG.298d06f38...@news.demon.co.uk>,
Philip Herlihy <bounc...@you.com> wrote:
...
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>
--
dorayme
Philip Herlihy <bounc...@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
> 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).
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>
--
dorayme
Philip Herlihy
Jan 27, 2012, 5:38:36 PM1/27/12
to
In article <dorayme-72D77E...@news.albasani.net>,
dor...@optusnet.com.au says...
> Yes, containers can take their height from the contents and they can
> instead be given a height. ...
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!
--
Phil, London
dor...@optusnet.com.au says...
>
> In article <MPG.298d06f38...@news.demon.co.uk>,
> Philip Herlihy <bounc...@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*. ...
> In article <MPG.298d06f38...@news.demon.co.uk>,
> Philip Herlihy <bounc...@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
> Yes, containers can take their height from the contents and they can
>
> 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.
>
...
> 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!
--
Phil, London
dorayme
Jan 27, 2012, 8:13:12 PM1/27/12
to
In article
<56933e3f-8a04-4d05...@f14g2000yqe.googlegroups.com>,
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.
> Right now,
> this isn't happening, as illustrated by this JSFiddle --
> http://jsfiddle.net/XAYWZ/
You might some ideas of a different way by jsfiddling with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Filling height spaces</title>
<style type="text/css">
.productDetailsPanel
{
min-height: 600px;
position: relative;
background-color: yellow;
height: 100%;
}
.tabPanel
{
background-color: blue;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 2em;
}
.tabBar
{
background-color: red;
height: 2em;
}
.tabContent
{
background-color: silver;
position: absolute;
bottom: 2em;
top: 2em;
right: 0;
left: 0;
}
</style>
</head>
<body>
<div class="productDetailsPanel">
<button value="Save">Save</button> <button
value="Reset">Reset</button>
</div>
</div>
</body>
</html>
> . Problem is, even if I specify height:100% for the middle element,
> it doesn't expand to fill the space. Here is the HTML ...
>
> <div class="productDetailsPanel">
> <div class="tabPanel">
> <div class="tabBar">Tab Bar</div>
> <div class="tabContent">Content</div>
>
> <table>
> <tr>
>
--
dorayme
<56933e3f-8a04-4d05...@f14g2000yqe.googlegroups.com>,
laredotornado <laredo...@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
> I'm using Win XP and have noticed this on Firefox, Chrome, and IE. I
> have three block elements, aligned vertically.
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,
> and I would like the middle
> element to take up as much vertical space as possible.
the space you want, you want the yellow to disappear I guess.
> Right now,
> this isn't happening, as illustrated by this JSFiddle --
> http://jsfiddle.net/XAYWZ/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Filling height spaces</title>
<style type="text/css">
.productDetailsPanel
{
min-height: 600px;
position: relative;
background-color: yellow;
height: 100%;
}
.tabPanel
{
background-color: blue;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 2em;
}
.tabBar
{
background-color: red;
height: 2em;
}
.tabContent
{
background-color: silver;
position: absolute;
bottom: 2em;
top: 2em;
right: 0;
left: 0;
}
</style>
</head>
<body>
<div class="productDetailsPanel">
<div class="tabBar">
Tab Bar
</div>
<div class="tabContent">
Content
</div>
<div class="tabPanel">
Tab Bar
</div>
<div class="tabContent">
Content
</div>
<button value="Save">Save</button> <button
value="Reset">Reset</button>
</div>
</div>
</body>
</html>
> . Problem is, even if I specify height:100% for the middle element,
> it doesn't expand to fill the space. Here is the HTML ...
>
> <div class="productDetailsPanel">
> <div class="tabPanel">
> <div class="tabBar">Tab Bar</div>
> <div class="tabContent">Content</div>
>
> <table>
> <tr>
>
dorayme
Gus Richter
Jan 28, 2012, 1:47:20 PM1/28/12
to
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:
Remove: height:100%; from: .tabPanel
Remove: height:100%; from: .tabContent
Remove: min-height: 600px; from: .productDetailsPanel
Add: min-height: 600px; to: .tabContent
--
Gus
Gus Richter
Jan 28, 2012, 1:54:17 PM1/28/12
to
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
> You might some ideas of a different way by jsfiddling with
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.
--
Gus
dorayme
Jan 28, 2012, 5:22:36 PM1/28/12
to
In article <jg1g8u$uub$1...@dont-email.me>,
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.
--
dorayme
Gus Richter <gusri...@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
> 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.
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.
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.
--
dorayme
Ben C
Feb 21, 2012, 12:04:49 PM2/21/12
to
On 2012-01-27, Philip Herlihy <bounc...@you.com> wrote:
[...]
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.
[...]
> 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
> can't set height to be 100%, and if you could, you'd be setting it to
> 100% of the container's *width*.
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.
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).
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.
Ben C
Feb 21, 2012, 12:06:56 PM2/21/12
to
On 2012-01-27, dorayme <dor...@optusnet.com.au> wrote:
> In article <MPG.298d06f38...@news.demon.co.uk>,
> Philip Herlihy <bounc...@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
> In article <MPG.298d06f38...@news.demon.co.uk>,
> Philip Herlihy <bounc...@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.
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).
Philip Herlihy
Feb 22, 2012, 12:25:12 PM2/22/12
to
In article <slrnjk7jlh....@bowser.marioworld>,
spam...@spam.eggs says...
Very useful - thanks!
--
Phil, London
spam...@spam.eggs says...
--
Phil, London
0 new messages