 | |
Height:100% - XXXpx CSS issue
Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)
 |
| | Thread Tools | Display Modes |
#1
 
| |||
| |||
|
Height:100% - XXXpx CSS issue -
09-23-2008
, 08:34 PM
#2
| |||
| |||
|
|
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). |
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
#3
| |||
| |||
|
|
In article c7b0dac0-dbc9-44cf-9a06-576cfef57... (AT) z11g2000prl (DOT) googlegroups.com>, *msoliver <michaelsoli... (AT) gmail (DOT) com> wrote: 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 |
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
#4
| |||
| |||
|
|
On Sep 23, 6:44*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote: In article c7b0dac0-dbc9-44cf-9a06-576cfef57... (AT) z11g2000prl (DOT) googlegroups.com>, *msoliver <michaelsoli... (AT) gmail (DOT) com> wrote: 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. |
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?
Quote:
|
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... |
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
#5
| |||
| |||
|
#6
| |||
| |||
|
|
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
#7
| |||
| |||
|
|
At such, I'll not get a container div with the height of 100% - 20px, which is my goal. |
Quote:
|
Is this possible? |
support may vary.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
#8
| |||
| |||
|
|
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? |
#HeadingDiv
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
}
#DataDiv
{
position: absolute;
top: 20px;
left: 0;
right: 0;
bottom: 0;
}
|
« Previous Thread
|
Next Thread »
| Thread Tools | |
| Display Modes | |
Linear Mode
| |
Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.