Paulo is indeed correct. What you would need to do is apply JavaScript that triggers when the window is loaded and again any time the window is resized, dynamically fixing the height of the top area to the appropriate height based on the available area. Frameworks such as extJS and jQuery might help do that more easily, but either way it is beyond the scope of this forum.
On Dec 3, 5:51 am, "Paulo Diovani" <[email protected]> wrote: > Sorry friend, but i don't think you can make it works as you wish without > scripting. The IE behavior is not trully the correct. Seens that overflow > only works if the element has a constant width or height. As you can check > by adding a valid DTD do your document, and seeing that don't even MSIE > scroll the top cell. > > You may find some css technic to add this behavior, maybe using a tableless > layout. But you should consider using a fixed height top div, before start > reasearching. > > __ > Paulo Diovani Gonçalves > [email protected]http://diovani.com > > > -----Mensagem original----- > > De: Passiday [mailto:[email protected]] > > Enviada em: quarta-feira, 2 de dezembro de 2009 20:25 > > Para: Design the Web with CSS > > Assunto: [Design with CSS 2689] Vertical scrollbar in a stretchy table > > cell > > > 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] -- -- 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]
