Filling remainder of height

J

Jason Carlton

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
 
D

dorayme

Jason Carlton said:
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%".
Click to expand...

100% of what?

URL?
 
D

dorayme

Jason Carlton said:
If the height of the first 2 elements are set dynamically, then how do
I make the 3rd element fill up the remaining height?
Click to expand...

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.
 
J

Jason Carlton

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.
Click to expand...

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.
 
C

C A Upsdell

Jason said:
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.
Click to expand...

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.
 
N

Neredbojias

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.
Click to expand...

"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.
 
J

Jason Carlton

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.
Click to expand...


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

Neredbojias

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

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.
 
J

Jason Carlton

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.
Click to expand...

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?
 
N

Neredbojias

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?
Click to expand...

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
 
J

Jason Carlton

No, that's not supposed to work. Height: 100% is supposed to mean, 100%
of the container, not of what's left of the container after other stuff
has gone in.
Click to expand...

Yeah, I always knew that this was a workaround, but it worked on all
major browsers (until now) so I didn't care.

You can do this with tables-- just use an outer table that's height:
100% (also set html and body to height: 100%) with two auto height rows
for the first two things, and one more row for the last thing, also auto
height.

But, you can't rely on making the contents of cells in that last row
height: 100%. Absolute positioning would work (top: 0 and bottom: 0 with
position: relative on the table cell) but not in FF as it doesn't allow
table cells to be containing blocks for positioned descendents.
Click to expand...

I gotcha. I might have to make a single table in the background that's
100% with all of the stylings, then place another table inside of that
with the content and no styling.

To do all this without tables, there are various ways of faking the same
effect, but it depends exactly what you want-- what has backgrounds and
what has borders in all this?
Click to expand...

The top table has no background or borders, the second has a
background image, and the third has a background color and a left,
right, and bottom border.

Thanks for your help, Ben,

Jason
 
J

Jason Carlton

As the dinosaur said to the proto-mammal:

ARRRGHHH!!!

For one thing, you can't put divs in spans.
Click to expand...

Why is it wrong to nest a DIV inside of a SPAN? AFAIK, <span></span>
is the same as <div style="display: inline"></div>, so I generally
just use span when I want the elements to stay inline. If it's wrong,
though, then the above SPAN tags can be replaced with <div
 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
Click to expand...

That's actually the same thing that "dorayme" posted yesterday, but it
still doesn't nest the elements inside of a container. Thanks anyway,
though,

Jason
 
C

C A Upsdell

Jason said:
Why is it wrong to nest a DIV inside of a SPAN? AFAIK, <span></span>
is the same as <div style="display: inline"></div>, so I generally
just use span when I want the elements to stay inline. If it's wrong,
though, then the above SPAN tags can be replaced with <div
style="display: inline"></div> for the same presentation.
Click to expand...

"Why is it wrong to nest a DIV inside of a SPAN"? There are standards
which define what is valid HTML (and CSS). The HTML standards forbid
putting a DIV inside a SPAN.

Your question is odd enough that I think that your next step should be
to educate yourself, e.g. (a) learn how to validate pages, and (b) buy a
book that teaches you how to create web pages properly.
 
J

Jason Carlton

"Why is it wrong to nest a DIV inside of a SPAN"?  There are standards
which define what is valid HTML (and CSS).  The HTML standards forbid
putting a DIV inside a SPAN.

Your question is odd enough that I think that your next step should be
to educate yourself, e.g. (a) learn how to validate pages, and (b) buy a
book that teaches you how to create web pages properly.
Click to expand...

Is there seriously a reason that people here are condescending? It's a
simple question, and there's no need for anyone to be rude about it.

I'm not asking about basic validation, I'm asking WHY. What's the
basic logic behind this being wrong? If there's no basic logic behind
the rule, then maybe the standard is what's wrong.
 
J

Jason Carlton

Is there seriously a reason that people here are condescending? It's a
simple question, and there's no need for anyone to be rude about it.

I'm not asking about basic validation, I'm asking WHY. What's the
basic logic behind this being wrong? If there's no basic logic behind
the rule, then maybe the standard is what's wrong.
Click to expand...

Or more simply, why is this supposedly invalid:

<span><div>Test</div></span>

But this, which renders exactly the same, validates correctly for both
HTML and CSS:

<div style="display: inline"><div>Test</div></div>

And finally, why are we having such a remedial discussion on this in a
thread that's about "filling [the] remainder of height". You guys know
what I'm asking, so stop nit-picking over nonsense. If you don't know
the answer to the question, then please leave the thread alone so that
Dorayme and Ben C can continue helping.
 
C

C A Upsdell

Jason said:
Is there seriously a reason that people here are condescending? It's a
simple question, and there's no need for anyone to be rude about it.

I'm not asking about basic validation, I'm asking WHY. What's the
basic logic behind this being wrong? If there's no basic logic behind
the rule, then maybe the standard is what's wrong.
Click to expand...

It does not matter whether the standards seem right or wrong to you.
What matters is that there are standards, and whether you like them or
not you will have to learn about them, and live with them, if you want
to create web pages which are rendered properly by today's standards
compliant browsers.
 
A

Adrienne Boswell

Gazing into my crystal ball I observed Jason Carlton
Is there seriously a reason that people here are condescending? It's a
simple question, and there's no need for anyone to be rude about it.

I'm not asking about basic validation, I'm asking WHY. What's the
basic logic behind this being wrong? If there's no basic logic behind
the rule, then maybe the standard is what's wrong.
Click to expand...

DIV is a block level element, and span is an inline element. You would
use DIV is a "division" in the structure of your document, say for
navigation or a header. Span on the other hand is for styling some
content differently than the surrounding content, say if you wanted to
have a particular word in green.

You cannot nest block level elements in inline elements. It's kind of
like trying to fit our Sun into our Moon. You can have a total eclipse,
but the fact remains that the Sun is still a sun and the Moon is still a
moon.

So, if you do <span><div style="display:inline">something</div></span>
it is still invalid because although the div is _styled_ to be display
inline, it is still a block level element.
 
N

Neredbojias

Why is it wrong to nest a DIV inside of a SPAN? AFAIK, <span></span>
is the same as <div style="display: inline"></div>, so I generally
just use span when I want the elements to stay inline. If it's wrong,
though, then the above SPAN tags can be replaced with <div


That's actually the same thing that "dorayme" posted yesterday,
Click to expand...

Actually, it isn't, and the difference is the key to understanding one
big problem.
but it
still doesn't nest the elements inside of a container.
Click to expand...

Here is where you lose me. AFAICS, the elements are nested in a
container and I'm completely baffled as to what you're really trying to
accomplish.
Thanks anyway,
though,
Click to expand...

Sure.
 
J

Jason Carlton

So are you saying we need a table at the bottom, that completely fills
the remaining height?

I can't see a way to do that reliably. The only way I can think of
still involves using table cells as containers for postioned descendents
which doesn't work in FF.

Are these real tables, or just layout tables? If the latter, if you
explain the layout you want, there might be a completely different way
of achieving it, or something close to it.
Click to expand...

Thanks for the help, Ben.

For anyone reading this in the future, I found a way to render this
correctly, using Javascript. I know that's not exactly appropriate for
an HTML newsgroup, but since there doesn't appear to be a way to do it
using pure HTML then I hope you'll forgive me.

I've checked this with IE 5.5 - 8.0, and FF 3.5, and it works fine. It
may not work correctly in older versions of FF, though.

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

<td>
<table id="firstTable">
<tr>
<td>Test</td>
</tr>
</table>

<table id="secondTable">
<tr>
<td>Test</td>
</tr>
</table>

<script language="Javascript">
<!--

if (document.documentElement.clientHeight) {
var mainHeight = document.getElementById
("container").clientHeight;
var firstHeight = document.getElementById
("firstTable").clientHeight;
var secondHeight = document.getElementById
("secondTable").clientHeight;

var thisHeight = container - firstHeight - secondHeight;

document.write("<table height='" + thisHeight + ">");
}

else document.write("<table height='100%'>");

// -->
</script>
<noscript><table height="100%"></noscript>

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

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


The logic is to use Javascript to determine the height of the
container, then find the height of the first 2 tables that are nested.
Subtract those heights from the height of the container, and you'll
have determined the necessary height for the third table.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working with min-height 1
Responsive width SVG image with fixed height rectangle at left and bottom - see my pen 0
make last row of table take up remainder of page 8
Can I count the number of times a video is played? 2
height of input box 12
filling glyphs 2
DIV height 3
Set div height to 100% minus a fixed pixel value? 21

Members online

No members online now.
Total: 234 (members: 0, guests: 234)
Robots: 333

Forum statistics

Threads
474,434
Messages
2,571,685
Members
48,796
Latest member
Greg L.

Latest Threads

Top