Hello,
I am puzzled why my simple code does not work:
<html>
<head>
<title>Top</title>
<style>
body {
overflow: auto;}
td {
padding: 0px;
margin : 0px}
</style>
</head>
<body style="margin:0px">
<table width="100%" height="100%" style="border-
collapse:collapse;
padding:0px; margin:0px">
<tr>
<td style="background:#00ffee;">
<div style="height:100%; overflow:auto">
Looong dummy text in here
</div>
</td>
</tr>
<tr>
<td style="height:80px; bacground:#eeeeee">
Dummy text here
</td>
</tr>
</table>
</table>
</body>
</html>
You will have to replace the "Looong dummy text in here" with
something really long, to see what I'm talking about.
MSIE actually renders this correctly. The idea is that the bigger top
area adjusts it's size depending on the size of the web browser
window. The bottom area's height should be fixed 80px at all times.
Since the top area can possibly contain info that takes up more
vertical space than is available, a vertical scrollbar should be
introduced, once the content can not fit in. The bottom area must stey
where it is - at the bottom part of the browser window.
I have been reading that CSS' height:100% works only if the height of
it's containing container is known. I thought that it indeed is,
because the table's height is equal to the browser's window height,
and of the two table rows, one is of fixed height. And MSIE seems to
support this concept.
So the question is, can I make Firefox render this correctly? I can
easily imagine that I could stick a JavaScript code to the windows
onsize event, where I read the top areas height and set the height
property of the div that contains all the content. But I hoped that I
could avoid using scripting.
Thanks!
-- Passiday
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
