Height:100% - XXXpx CSS issue

[msoliver]

Okay, I believe this is one of the biggest issues found using CSS/DIV
layout. But, I haven't found a non-Javascript solution.

I would like two DIVs - first DIV, say with a height of 20px. The
second DIV with a height of 100% (the rest of the viewport).

If I do this
<div style="height:20px>
</div>
<div id="MyContainer" style="height:100%">
</div>

MyContainer will have 100% of the height of it's container box (e.g. a
<bodysized 100% to the viewport). At such, I'll not get a container
div with the height of 100% - 20px, which is my goal. I'm looking to
do this without javascript or alternatively, nested tables (which is a
CSS nightmare cross-browser).

Is this possible? If not, I'll go the javascript route, but... Is CSS
this limited?

Thanks,

- Mike

[dorayme]

In article
<c7**********************************@z11g2000prl. googlegroups.com>,
msoliver <mi************@gmail.comwrote:

Okay, I believe this is one of the biggest issues found using CSS/DIV
layout. But, I haven't found a non-Javascript solution.

I would like two DIVs - first DIV, say with a height of 20px. The
second DIV with a height of 100% (the rest of the viewport).

There are different ways to skin this cat (your description is not quite
accurate but I sort of know what you mean).

This looks ok in FF 3, Safari 3 and iCab 4, Opera 9.5:

<http://dorayme.890m.com/alt/px_percent_heights.html>

--
dorayme

[msoliver]

On Sep 23, 6:44*pm, dorayme <[e-mail]:

In article
<[e-mail]>,

*msoliver <[e-mail]:

Okay, I believe this is one of the biggest issues found using CSS/DIV
layout. But, I haven't found a non-Javascript solution.

I would like two DIVs - first DIV, say with a height of 20px. The
second DIV with a height of 100% (the rest of the viewport).

There are different ways to skin this cat (your description is not quite
accurate but I sort of know what you mean).

This looks ok in FF 3, Safari 3 and iCab 4, Opera 9.5:

<http://dorayme.890m.com/alt/px_percent_heights.html>

--
dorayme

Thanks, but unfortunately, there is a problem with your solution:

DIV top is 20 px high and DIV rest is 100% high. DIV rest appears to
be 100% - 20px, but it's the full height of the viewport. You can see
this if you remove the background of the top div. So, what's going on
is the top DIV is 20px and then the rest DIV is just layered
underneath the top DIV, but takes 100% of the viewport. The padding-
top: 20px makes the DIV rest content display in the right place, but
when I replace it with real content, it's clear that the height is
off...

Thanks.

- Mike

[dorayme]

In article
<52**********************************@v16g2000prc. googlegroups.com>,
msoliver <mi************@gmail.comwrote:

On Sep 23, 6:44*pm, dorayme <[e-mail]:

In article
<[e-mail]>,

*msoliver <[e-mail]:

Okay, I believe this is one of the biggest issues found using CSS/DIV
layout. But, I haven't found a non-Javascript solution.

I would like two DIVs - first DIV, say with a height of 20px. The
second DIV with a height of 100% (the rest of the viewport).

There are different ways to skin this cat (your description is not quite
accurate but I sort of know what you mean).

This looks ok in FF 3, Safari 3 and iCab 4, Opera 9.5:

<http://dorayme.890m.com/alt/px_percent_heights.html>

--
dorayme

Thanks, but unfortunately, there is a problem with your solution:

DIV top is 20 px high and DIV rest is 100% high.

which was one of your descriptions. You see, there is a contradiction in
your description and I took one of the horns on the principle of
charitable interpreation. You said 100% and I assumed this is 100% of
viewport. True, you also said the second div should be "the rest"
implying viewport minus 20px. But no one can know what percentage this
is so unless one knows exactly what the user has opened his browser to
(js come to mind). Why did you mention a percentage? Surely not for the
vacuous reason that anything at all is 100% of what it is?

DIV rest appears to
be 100% - 20px, but it's the full height of the viewport. You can see
this if you remove the background of the top div. So, what's going on
is the top DIV is 20px and then the rest DIV is just layered
underneath the top DIV, but takes 100% of the viewport. The padding-
top: 20px makes the DIV rest content display in the right place, but
when I replace it with real content, it's clear that the height is
off...

When you replace the 20px high dive with real content? You can't get
much content in 20px high!

Is there a chance that you can post a URL with almost the same length
and type of content you want. Otherwise we are just playing theoretical
games with not quite well defined parameters. It is best for me to
understand what you are wanting to do on the whole. I gave you 100% div,
I gave you 20px div and like little Thomas the Tank Engine, I tried my
very best

--
dorayme

[msoliver]

I appreciate all of your help. How about I just show the HTML -
hopefully this will explain things better. I cleaned up the HTML a bit
for clarify sake.

I have a surrounding DIV, GridDiv. Then I have two child divs,
HeadingDiv, and DataDiv. GridDiv is already expanded to 100% of the
viewport. I want HeadingDiv to be 20px,which is easy enough. And then
I want DataDiv to take the rest of the viewport's height (100% -
20px). If I added padding-top to DataDiv, I see the first table row.
However, as the Data Table grows, the scroll bar will show up and take
up the full viewport's height (which is how I noticed that the second
div is still 100% of the viewport, not 100% - 20px... Make more sense?

Thanks!

<body onload="onload()">
<div id="GridDiv">
<div id="HeadingDiv">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="cell">Col1</td>
<td class="cell">Col2</td>
<td class="cell">Col3</td>
<td class="cell">Col4</td>
<td class="cell">Col5</td>
<td></td>
</tr>
</table>
</div>
<div id="DataDiv" >
<table id="DataTable" cellspacing="0" cellpadding="0">
<tr>
<td class="cell">Data1</td>
<td class="cell">Data1</td>
<td class="cell">Data1</td>
<td class="cell">Data1</td>
<td class="cell">Data1</td>
</tr>
<tr>
<td class="cell">Data2</td>
<td class="cell">Data2</td>
<td class="cell">Data2</td>
<td class="cell">Data2</td>
<td class="cell">Data2</td>
</tr>
<tr>
<td class="cell">Data3</td>
<td class="cell">Data3</td>
<td class="cell">Data3</td>
<td class="cell">Data3</td>
<td class="cell">Data3</td>
</tr>
</table>
</div>
</div>
</body>

[dorayme]

In article
<46**********************************@n33g2000pri. googlegroups.com>,
msoliver <mi************@gmail.comwrote:

I appreciate all of your help. How about I just show the HTML -
hopefully this will explain things better. I cleaned up the HTML a bit
for clarify sake.

I have a surrounding DIV, GridDiv. Then I have two child divs,
HeadingDiv, and DataDiv. GridDiv is already expanded to 100% of the
viewport. I want HeadingDiv to be 20px,which is easy enough. And then
I want DataDiv to take the rest of the viewport's height (100% -
20px). If I added padding-top to DataDiv, I see the first table row.
However, as the Data Table grows, the scroll bar will show up and take
up the full viewport's height (which is how I noticed that the second
div is still 100% of the viewport, not 100% - 20px... Make more sense?

Thanks!

<body onload="onload()">
<div id="GridDiv">
<div id="HeadingDiv">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="cell">Col1</td>
<td class="cell">Col2</td>
<td class="cell">Col3</td>

Hi, it's me, Thomas the Tank Engine back. I talked to my big brother,
The Scotland Express (A shielder that goes through Manchester and
particularly Didsbury) and he calmed me down.

Why don't you supply a URL, do not put in js instructions if they are
not doing anything, explain within the table cells if need be what it is
you would like to see that cell or that row or this table to be doing.
How about making a diagram in Photoshop or Illustrator or any program
you like. How about hand drawing it and scanning it and posting it as a
picture to a public server where we can see it.

Thomas here is orfffff for a swim in the sea (I know! Salt and steel....
never mind, will take a risk), being how lovely it is this fine spring
Sydney day.

--
dorayme

[Johannes Koch]

msoliver schrieb:

At such, I'll not get a container
div with the height of 100% - 20px, which is my goal.

[...]

Is this possible?

Try an absolutely positioned block with "top: 20px; bottom: 0". Browser
support may vary.

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Ben C]

On 2008-09-24, msoliver <mi************@gmail.comwrote:

I appreciate all of your help. How about I just show the HTML -
hopefully this will explain things better. I cleaned up the HTML a bit
for clarify sake.

I have a surrounding DIV, GridDiv. Then I have two child divs,
HeadingDiv, and DataDiv. GridDiv is already expanded to 100% of the
viewport. I want HeadingDiv to be 20px,which is easy enough. And then
I want DataDiv to take the rest of the viewport's height (100% -
20px). If I added padding-top to DataDiv, I see the first table row.
However, as the Data Table grows, the scroll bar will show up and take
up the full viewport's height (which is how I noticed that the second
div is still 100% of the viewport, not 100% - 20px... Make more sense?

Just use absolute positioning as somebody suggested.

#HeadingDiv
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
}
#DataDiv
{
position: absolute;
top: 20px;
left: 0;
right: 0;
bottom: 0;
}