By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,879 Members | 1,809 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,879 IT Pros & Developers. It's quick & easy.

peg the height of a table to 90% of the screen

P: n/a
HTMLers:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

What does it look like it will do? If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?

The goal is the <divgets a scroll bar so its internals are always in
a viewport inside the screen.

So now put your cursor inside the <div>, and paste all this in:

http://etext.virginia.edu/stc/Coleri...t_Mariner.html

Not good. The table now sets its size based on the div, which detects
no overflow. Putting height tags in other places doesn't work (in
Firefox). No scroll bar appears, and the poetry overflows the
browser's page.

What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.

--
Phlip

Feb 23 '07 #1
Share this Question
Share on Google+
7 Replies


P: n/a
On 2007-02-23, Phlip <ph*******@gmail.comwrote:
HTMLers:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

What does it look like it will do? If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?

The goal is the <divgets a scroll bar so its internals are always in
a viewport inside the screen.

So now put your cursor inside the <div>, and paste all this in:

http://etext.virginia.edu/stc/Coleri...t_Mariner.html

Not good. The table now sets its size based on the div, which detects
no overflow. Putting height tags in other places doesn't work (in
Firefox).
If there's such a thing as <heighttag don't use it!
No scroll bar appears, and the poetry overflows the
browser's page.

What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.
Set the height (and overflow: scroll) on the div, not on the table. Or
experiment with table-layout: fixed.

Table cells (with table-layout: auto) don't allow their contents to
overflow, they always grow to at least big enough.
Feb 23 '07 #2

P: n/a
On 2007-02-23, Ben C <sp******@spam.eggswrote:
On 2007-02-23, Phlip <ph*******@gmail.comwrote:
>HTMLers:

Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>

What does it look like it will do? If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?
[...]
>What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.

Set the height (and overflow: scroll) on the div, not on the table. Or
experiment with table-layout: fixed.

Table cells (with table-layout: auto) don't allow their contents to
overflow, they always grow to at least big enough.
I should have added: remember that percentage heights of auto-height
containers are meaningless and if not ignored by the browser should
be.

So a percentage height on the div in an auto-height table won't work.

With html, body { height: 100%; }, 90% on the table, 100% on the td and
100% and overflow: scroll, on the div you'd think it should work because
the percentages go all the way to the top. This does work in Opera, but
not in FF.

Can you avoid using a table?
Feb 23 '07 #3

P: n/a
بسم الله الرحمن الرحيم
افضل موقع للتعارف بين الجنس ين الشباب والبنات من كل دول العالم
www.arabzwaj.com

بنات وشباب عايزيين يتعرفوا عليكم
صور عارية حقيقية
تعارف مجاني من كل دول العالم www.arabzwaj.com
for marrige and friend shipافضل تعارف بين الشباب والبنات موقع زواج
مجاني www.arabzwaj.com

www.arabzwaj.com افضل موقع مجاني للتعارف و للزواج الشرعي

www.arabzwaj.com بنات وشباب عايزه تتعرف عليكم

the best web site formarrige and frindship www.arabzwaj.comافضل موقع
مجاني للتعارف و للزواج
Feb 24 '07 #4

P: n/a
Ben C wrote:
Can you avoid using a table?
Firstly, the body couldn't be 100% because I need an arbitrary-length
region under the table.

And not using a table worked perfectly. (For future reference: Stop
relying on tables for simple geometry, and use them _only_ for
arbitrarily sized data panels, in the style of spreadsheets!)

I started with a table because I need two independently scrolling
areas, side-by-side. So here's what works:

<div style='overflow: auto;height: 90%; width: 50%; float:left'>
An ancient Mariner meeteth three Gallants...
</div>
<div style='width:50%; border:1px; float: right'>
yo
</div>

Thanks for the tips!

--
Phlip

Feb 24 '07 #5

P: n/a
On 23 Feb, 05:24, "Phlip" <phlip2...@gmail.comwrote:
Start with this simple HTML:

<table border='1' width='100%' height='90%'>
<tr><td>
<div style='overflow: auto'>
</div>
</td></tr>
</table>
The table element don't have a height attrubute, and the width
attribute is deprecated. Use
style="width: 100%; height: 90%" insted.
What does it look like it will do?
You are setting the table height to 90% of something, and that
something has a default height of 'auto', then it look like the
browser will let the table grow to accommodate the height of the
content (without some browser magic). The value of 'auto' is initial
comupted to 0.
If the table sets the rules and its
inside things follow, then the table should peg to 100% by 90%, right?
No. 100 % of 90 % of 'auto' is 100% of the content, i think.
The goal is the <divgets a scroll bar so its internals are always in
a viewport inside the screen.
html, body { height: 100%; margin: 0 auto; padding: 0 auto }
....
<div style="height: 90%">...</div>
So now put your cursor inside the <div>, and paste all this in:

http://etext.virginia.edu/stc/Coleri...t_Mariner.html

Not good. The table now sets its size based on the div, which detects
no overflow. Putting height tags in other places doesn't work (in
Firefox). No scroll bar appears, and the poetry overflows the
browser's page.
Yes indeed, not good. To me it seems like Firefox treat fixed height
and calculated height diffrently. With fixed height; the height is
determined by the 'height' property. With an height in %, the height
is determined by content height. I hope I'm wrong.
What's the fix? I don't want to peg the table to height: 45ex, for
example, because I target any resolution.
The browser is schizophrenic. You can't fix that. Do it right, and let
the browser deside how to render it.
If you want, you couldt try a cocktail with relative and absolute
position values.

Feb 25 '07 #6

P: n/a
On 24 Feb, 03:31, "Phlip" <phlip2...@gmail.comwrote:
Ben C wrote:
Can you avoid using a table?

Firstly, the body couldn't be 100% because I need an arbitrary-length
region under the table.
That's no problem. The overflow property for body is 'visible'.

"This value indicates that content is not clipped, i.e., it may be
rendered outside the block box."

http://www.w3.org/TR/REC-CSS2/visufx...opdef-overflow
And not using a table worked perfectly.
That's because the browsers are correction you attempts to make tings
work. The 'height' property for all elements should is by default
'auto'. Try:
html, body { height: auto }
(For future reference: Stop
relying on tables for simple geometry, and use them _only_ for
arbitrarily sized data panels, in the style of spreadsheets!)
("Do not use tables for layout unless the table makes sense when
linearized. Otherwise, if the table does not make sense, provide an
alternative equivalent (which may be a linearized version).")

http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment
I started with a table because I need two independently scrolling
areas, side-by-side. So here's what works:

<div style='overflow: auto;height: 90%; width: 50%; float:left'>
An ancient Mariner meeteth three Gallants...
</div>
<div style='width:50%; border:1px; float: right'>
yo
</div>
How is that suppose to work? By some browser magic? And it don't
provide two independently scrolling areas, side-by-side.

For future reading:
http://www.w3.org/TR/html401/
http://www.w3.org/TR/REC-CSS2/
http://www.w3.org/TR/WCAG10-TECHS/

Feb 25 '07 #7

P: n/a
Roy A. wrote:
<div style='overflow: auto;height: 90%; width: 50%; float:left'>
An ancient Mariner meeteth three Gallants...
</div>
<div style='width:50%; border:1px; float: right'>
yo
</div>

How is that suppose to work? By some browser magic?
It works perfectly on Firefox, IE, and Konqueror. (I forgot to mention
the right div contains an IFrame and _that_ scrolls.)

Thanks again for the tips.

--
Phlip

Feb 25 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.