Go Back   Velocity Reviews > Newsgroups > HTML
User Name
Password
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Reply

HTML - Filling remainder of height

 
Thread Tools Search this Thread
Old 11-07-2009, 12:38 AM   #1
Default Filling remainder of height


This should be simple, but I can't get it to work so I know that I'm
overlooking something.

I have an element that has height="100%". Nested inside of this
element, I have 3 more elements.

If the height of the first 2 elements are set dynamically, then how do
I make the 3rd element fill up the remaining height? Setting it to
height="100%" used to work on older browsers, and still works on IE8,
but not on FF.

TIA,

Jason


Jason Carlton
  Reply With Quote
Old 11-07-2009, 01:20 AM   #2
dorayme
 
Posts: n/a
Default Re: Filling remainder of height
In article
<f3d46598-86e4-4402-a1ea->,
Jason Carlton <> wrote:

> This should be simple, but I can't get it to work so I know that I'm
> overlooking something.
>
> I have an element that has height="100%".


100% of what?

URL?

--
dorayme


dorayme
  Reply With Quote
Old 11-07-2009, 02:02 AM   #3
dorayme
 
Posts: n/a
Default Re: Filling remainder of height
In article
<f3d46598-86e4-4402-a1ea->,
Jason Carlton <> wrote:

> If the height of the first 2 elements are set dynamically, then how do
> I make the 3rd element fill up the remaining height?


This *looks* the part:

<!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>test</title>
<style type="text/css" media="screen">
body, html {height: 100%; margin: 0;}
p {margin: 0; padding: .5em;}
</style>
</head>
<body>
<div style="background: #cfc; height: 100%;">
<p style="background: #ccf;">Cras vel eros. Vivamus sed odio et orci
tincidunt ornare. </p>
<p style="background: #ffc">Cras vel eros. Vivamus sed odio et orci
tincidunt ornare. Duis dui lectus, commodo ut, gravida id, ultricies
quis, tellus. Vestibulum blandit nibh eget turpis. </p>
<p>Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
convallis, diam augue blandit magna. Cras vel eros. </p>
</div>
</body>
</html>

but I prefer the roles played by Humphrey Bogart.

--
dorayme


dorayme
  Reply With Quote
Old 11-07-2009, 04:33 AM   #4
Jason Carlton
 
Posts: n/a
Default Re: Filling remainder of height
On Nov 6, 9:02*pm, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <f3d46598-86e4-4402-a1ea-9cdfaad9c...@z41g2000yqz.googlegroups.com>,
> *Jason Carlton <jwcarl...@gmail.com> wrote:
>
> > If the height of the first 2 elements are set dynamically, then how do
> > I make the 3rd element fill up the remaining height?

>
> This *looks* the part:
>
> <!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>test</title>
> <style type="text/css" media="screen">
> body, html {height: 100%; margin: 0;}
> p {margin: 0; padding: .5em;}
> </style>
> </head>
> <body>
> <div style="background: #cfc; height: 100%;">
> <p style="background: #ccf;">Cras vel eros. Vivamus sed odio et orci
> tincidunt ornare. </p>
> <p style="background: #ffc">Cras vel eros. Vivamus sed odio et orci
> tincidunt ornare. Duis dui lectus, commodo ut, gravida id, ultricies
> quis, tellus. Vestibulum blandit nibh eget turpis. </p>
> <p>Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
> lectus, commodo ut, gravida id, ultricies quis, tellus. Vestibulum
> blandit nibh eget turpis. Quisque mollis, lacus consectetur eleifend
> convallis, diam augue blandit magna. Cras vel eros. </p>
> </div>
> </body>
> </html>
>
> but I prefer the roles played by Humphrey Bogart.
>
> --
> dorayme


You wouldn't like the URL; there's a ton of code here that you would
have to sort through to figure out what I'm talking about. It doesn't
help that a significant portion of my traffic uses old browsers, so
it's coded in tables, too.

But generally speaking, here's what I have:

<table width="100%" height="100%">
<tr>
<td>
<!-- This works fine -->
<table height="100%">
<tr>
<td>Test</td>
</tr>
</table>
</td>

<td>
<!-- This works on IE, but not FF -->
<table>
<tr>
<td>Test</td>
</tr>
</table>

<table>
<tr>
<td>Test</td>
</tr>
</table>

<table height="100%">
<tr>
<td>Test</td>
</tr>
</table>
</td>

<td>
<!-- This works fine -->
<table height="100%">
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>


On Firefox, the middle cell of the main table is making the last
nested table 100% of the parent table, but it doesn't include the
height of the 2 tables above it. So, for example, if the first 2
tables were each 10% of the height, then the 3rd table should be 80%
of the parent's height; but instead, it's 100%, so the whole thing
ends up being 20% taller than it should be.


Jason Carlton
  Reply With Quote
Old 11-07-2009, 04:40 AM   #5
C A Upsdell
 
Posts: n/a
Default Re: Filling remainder of height
Jason Carlton wrote:
> This should be simple, but I can't get it to work so I know that I'm
> overlooking something.
>
> I have an element that has height="100%". Nested inside of this
> element, I have 3 more elements.
>
> If the height of the first 2 elements are set dynamically, then how do
> I make the 3rd element fill up the remaining height? Setting it to
> height="100%" used to work on older browsers, and still works on IE8,
> but not on FF.


Set a Strict DOCTYPE, and with the meta tag which tells IE8 to render
code properly (i.e. <meta http-equiv="X-UA-Compatible" content="IE=8">),
and I'll bet that IE8 does it "wrong" too.



C A Upsdell
  Reply With Quote
Old 11-07-2009, 04:57 AM   #6
Neredbojias
 
Posts: n/a
Default Re: Filling remainder of height
On 06 Nov 2009, Jason Carlton <> wrote:

> This should be simple, but I can't get it to work so I know that I'm
> overlooking something.
>
> I have an element that has height="100%". Nested inside of this
> element, I have 3 more elements.
>
> If the height of the first 2 elements are set dynamically, then how
> do I make the 3rd element fill up the remaining height? Setting it to
> height="100%" used to work on older browsers, and still works on IE8,
> but not on FF.


"Fill up the remaing height" by setting the 3rd nested element to
height="100%"?? Hell, I can't see that working even in ie1 beta! If
it really does/did "work" as you say, I *know* I'm in Lala land and all
this is the work of the demon-women I scorned in my hunk years.

The solution, of course, is to do it right, and in order to do that,
you will have to learn *how* to do it right.

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/


Neredbojias
  Reply With Quote
Old 11-07-2009, 05:41 AM   #7
Jason Carlton
 
Posts: n/a
Default Re: Filling remainder of height
> The solution, of course, is to do it right, and in order to do that,
> you will have to learn *how* to do it right.



Of course.... which is what I'm asking. Maybe I worded the thread
incorrectly?


Jason Carlton
  Reply With Quote
Old 11-07-2009, 10:01 AM   #8
Neredbojias
 
Posts: n/a
Default Re: Filling remainder of height
On 06 Nov 2009, Jason Carlton <> wrote:

>> The solution, of course, is to do it right, and in order to do that,
>> you will have to learn *how* to do it right.

>
>
> Of course.... which is what I'm asking. Maybe I worded the thread
> incorrectly?


Actually, you "worded the thread" just fine if you mean the subject of
your original post. It's the rest of the text that is dubious.

'I have an element that has height="100%".'...

What element? Body, div, form...? Anyway, eventually you reply to
someone and voila! - it's a table! Pragmatically, it's *all* tables -
a nested-table layout. And that, my friend, is what is wrong.

Using tables for layout, while frowned upon by some, isn't
uncategorically an error, but it should be in a fairly simple context
and there are usually better ways to do it, anyway. OTOH, using
*nested* tables for layout wherein the rendered height of any or all is
critical to the layout itself is an absolute blunder, and we haven't
even gotten into doctypes yet!

Yes, I know, it used to work fine... Unfortunately, though, in order
for it to work fine today, you will have to dump the tables and
redesign the page using standardized markup and styles more germane to
the third millenium.

I'm not trying to insult you here but I *am* trying to convince you
that the solution to the problem, the only real solution, is to bring
your page up to date and up to snuff with current methods. Anything
less will simply not function as desired for the bulk of Internet users
regardless of whether the bulk of yours use old browsers or not.

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/


Neredbojias
  Reply With Quote
Old 11-07-2009, 10:40 AM   #9
Jason Carlton
 
Posts: n/a
Default Re: Filling remainder of height
On Nov 7, 5:01*am, Neredbojias <neredboj...@gmail.com> wrote:
> On 06 Nov 2009, Jason Carlton <jwcarl...@gmail.com> wrote:
>
> >> The solution, of course, is to do it right, and in order to do that,
> >> you will have to learn *how* to do it right.

>
> > Of course.... which is what I'm asking. Maybe I worded the thread
> > incorrectly?

>
> Actually, you "worded the thread" just fine if you mean the subject of
> your original post. *It's the rest of the text that is dubious.
>
> 'I have an element that has height="100%".'...
>
> What element? *Body, div, form...? *Anyway, eventually you reply to
> someone and voila! - it's a table! *Pragmatically, it's *all* tables -
> a nested-table layout. *And that, my friend, is what is wrong.
>
> Using tables for layout, while frowned upon by some, isn't
> uncategorically an error, but it should be in a fairly simple context
> and there are usually better ways to do it, anyway. *OTOH, using
> *nested* tables for layout wherein the rendered height of any or all is
> critical to the layout itself is an absolute blunder, and we haven't
> even gotten into doctypes yet!
>
> Yes, I know, it used to work fine... *Unfortunately, though, in order
> for it to work fine today, you will have to dump the tables and
> redesign the page using standardized markup and styles more germane to
> the third millenium.
>
> I'm not trying to insult you here but I *am* trying to convince you
> that the solution to the problem, the only real solution, is to bring
> your page up to date and up to snuff with current methods. *Anything
> less will simply not function as desired for the bulk of Internet users
> regardless of whether the bulk of yours use old browsers or not.
>
> --
> Neredbojiashttp://www.neredbojias.org/http://www.neredbojias.net/


That doesn't really make sense to me. I don't know of any styling that
can be added to a DIV tag that can't be added to a table, so it
doesn't seem logical to just drop the tables and make older browsers
inoperable, if it's not necessary.

But for the sake of discussion, let's just assume that this is the
code that I'm using:

<body style="height: 100%">

<div style="width: 100%; height: 100%; padding: 10px; border: 1px
solid #000000">
<span style="width: 33%; height: 100%; padding: 5px; border: 1px
solid #000000">Test</span>

<span id="MIDDLE" style="width: 33%; height: 100%; padding: 5px;
border: 1px solid #000000">
<div style="border: 1px solid #000000">Test</div>
<div style="border: 1px solid #000000">Test</div>
<div id="HERE" style="border: 1px solid #000000">Test</div>
</span>

<span style="width: 33%; padding: 5px; height: 100%; border: 1px
solid #000000">Test</span>
</div>


In the 2nd SPAN (id="MIDDLE"), how would I let the first two DIV
elements determine their height based on the content, and then have
the third DIV element (id="HERE") to fill up the remaining height?


Jason Carlton
  Reply With Quote
Old 11-07-2009, 07:41 PM   #10
Neredbojias
 
Posts: n/a
Default Re: Filling remainder of height
On 07 Nov 2009, Jason Carlton <> wrote:

> That doesn't really make sense to me. I don't know of any styling
> that can be added to a DIV tag that can't be added to a table, so it
> doesn't seem logical to just drop the tables and make older browsers
> inoperable, if it's not necessary.
>
> But for the sake of discussion, let's just assume that this is the
> code that I'm using:
>
> <body style="height: 100%">
>
> <div style="width: 100%; height: 100%; padding: 10px; border: 1px
> solid #000000">
> <span style="width: 33%; height: 100%; padding: 5px; border: 1px
> solid #000000">Test</span>
>
> <span id="MIDDLE" style="width: 33%; height: 100%; padding: 5px;
> border: 1px solid #000000">
> <div style="border: 1px solid #000000">Test</div>
> <div style="border: 1px solid #000000">Test</div>
> <div id="HERE" style="border: 1px solid #000000">Test</div>
> </span>
>
> <span style="width: 33%; padding: 5px; height: 100%; border: 1px
> solid #000000">Test</span>
> </div>
>
>
> In the 2nd SPAN (id="MIDDLE"), how would I let the first two DIV
> elements determine their height based on the content, and then have
> the third DIV element (id="HERE") to fill up the remaining height?


As the dinosaur said to the proto-mammal:

ARRRGHHH!!!

For one thing, you can't put divs in spans. But...let's continue on
with a more positive note. Check-out the following link and see if
that's what you want. I'm not really 100% sure.

http://www.neredbojias.org/_dems/dem6.html

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/


Neredbojias
  Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
How to control the height of a Drop down control Siri_y Software 1 05-17-2009 06:19 AM
Taskbar height keeps resetting Otiose Computer Support 13 05-10-2007 03:35 AM
samson complex, a tool for the underdog underdog bites back Computer Support 0 12-12-2005 07:55 PM
Ebay filling up temp Folder taking up to 1min to load CPU Usage 100% Chris Computer Support 1 05-24-2004 01:13 PM
drive c is filling up Flagg Computer Information 6 11-18-2003 04:34 AM




SEO by vBSEO 3.3.2 ©2009, Crawlability, Inc.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46