SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Need an overflow: auto scrollbar on height: 100%...

    Hi everyone,

    Well, I am back with more css questions.

    Below is the code for my test page. Where you see <div id="content">, is it possible to give that a scrollbar when the content gets to long, but off of height: 100% versus a PX value?

    I posted this in the JS forum thinking there is a JS solution to force the issue, but maybe there is a non-js method?

    Code:
     <!--quirks-->
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Untitled Document</title>
     <style type="text/css">
     * {margin: 0px; padding: 0px;}
     html, body {height: 100%; max-height:100%;}
     table#main {border-collapse: collapse; height: 100%; width: 100%;}
     table#main td {vertical-align: top;}
     table#main tr#cols td {height: 100%;}
     
     #leftcol {background: #eee; width: 200px;}
     	div#leftinner {width: 200px;}
     	
     #maincol {background: #ddd; width: 100%;}
     	div#centerinner {width: 100%;}
     	div#rating {padding: 10px; background: #333333;}
     	div#content {height: 100%; overflow: auto;}
     
     #rightcol {background: #ccc; width: 320px;}
     	div#rightinner {width: 320px; background: #ccc; position: relative; margin-top: -100px; height: 100%;}
     	
     #header {height: 100px;}
     #footer {height: 60px;}
     </style>
     </head>
     
     <body>
     <table id="main">
     <tr>
     <td id="header" colspan="3">Header</td>
     <tr id="cols">
     	<td id="leftcol">
     		<div id="leftinner">
     	Left column
     		</div>
     	</td>
     	<td id="maincol">
     	<div id="centerinner">
     		<div id="rating"><br /><br /><br /></div>
     		<div id="content">
     		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
     Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug...<br />
     <a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
     		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
     Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug...<br />
     <a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
     		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
     Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug...<br />
     <a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
     		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
     Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug...<br />
     <a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
     		</div>
     	</div>
     	</td>
     	<td id="rightcol">
     	<div id="rightinner">
     	right column
     	</div>
     	</td>
     </tr>
     <tr>
     <td id="footer" colspan="3">footer</td>
     </tr>
     
     </table> </body></html>
    Any help is always appreciated.

    Thanks,
    Bryan
    Last edited by jag5311; Jun 14, 2006 at 07:12.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    overflow: auto; should do the trick.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •