Web Hosting CSS & Stylesheet Forums
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Add Me

User Name
Password
Go Back   CSS & Stylesheet Forums > CSS Forumz: Main > Style Sheet In General
Reload this Page Height:100% - XXXpx CSS issue

Welcome to the CSS & Stylesheet Forums forums.

You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so please, join our community today!

If you have any problems with the registration process or your account login, please contact contact us.
Tags:



Reply
Display Modes Search this Thread Thread Tools  
  #1 (permalink)  
Old 09-24-2008, 05:54 AM
msoliver
Guest
  
Posts: n/a
Diggs:
Default Height:100% - XXXpx CSS issue


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
<body> sized 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
Reply With Quote


Sponsored Links
  #2 (permalink)  
Old 09-24-2008, 05:54 AM
dorayme
Guest
  
Posts: n/a
Diggs:
Default Re: Height:100% - XXXpx CSS issue
In article
<c7b0dac0-dbc9-44cf-9a06-576cfef57495@z11g2000prl.googlegroups.com>,
msoliver <michaelsoliver@gmail.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
Reply With Quote


  #3 (permalink)  
Old 09-24-2008, 05:54 AM
msoliver
Guest
  
Posts: n/a
Diggs:
Default Re: Height:100% - XXXpx CSS issue
On Sep 23, 6:44-pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <c7b0dac0-dbc9-44cf-9a06-576cfef57...@z11g2000prl.googlegroups.com>,
>
> -msoliver <michaelsoli...@gmail.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. 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
Reply With Quote


  #4 (permalink)  
Old 09-24-2008, 05:54 AM
dorayme
Guest
  
Posts: n/a
Diggs:
Default Re: Height:100% - XXXpx CSS issue
In article
<52c5d17b-f2da-4686-85b8-6600b107e547@v16g2000prc.googlegroups.com>,
msoliver <michaelsoliver@gmail.com> wrote:

> On Sep 23, 6:44-pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> > In article
> > <c7b0dac0-dbc9-44cf-9a06-576cfef57...@z11g2000prl.googlegroups.com>,
> >
> > -msoliver <michaelsoli...@gmail.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.

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
Reply With Quote


  #5 (permalink)  
Old 09-24-2008, 05:54 AM
msoliver
Guest
  
Posts: n/a
Diggs:
Default Re: Height:100% - XXXpx CSS issue
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>
Reply With Quote


  #6 (permalink)  
Old 09-24-2008, 05:54 AM
dorayme
Guest
  
Posts: n/a
Diggs:
Default Re: Height:100% - XXXpx CSS issue
In article
<463e98cc-3e13-46a9-ae25-a5346b99d30b@n33g2000pri.googlegroups.com>,
msoliver <michaelsoliver@gmail.com> wrote:

> 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
Reply With Quote


  #7 (permalink)  
Old 09-29-2008, 12:41 AM
Johannes Koch
Guest
  
Posts: n/a
Diggs:
Default Re: Height:100% - XXXpx CSS issue
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.)
Reply With Quote


Reply

« Previous Thread | Next Thread »

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


CSS & Stylesheet Forums RSS Feeds - Contact Us -|- CSS & Stylesheet Forums -|- Archive -|- Top -|-Rules/Disclaimer-|-Help/Support-|-Advertise
© Camley Interactive (camley.info) 2008 - all logos and images are copywrite their respective owners.
Proud member of the Camley Interactive Network
All times are GMT. The time now is 08:41 PM.
Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.1.0 ©2007, Crawlability, Inc.




Inactive Reminders By Mished.co.uk