SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  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)

    Forced Scrollbar for internal div & 100% height?

    Ok JS gurus, I am in need of your assistance.

    I have the following code and in a nutshell, where you see <div id="content">, I would LOVE for that to have a scrollbar when the content grows to much, but here is the problem, I need it to be a height of 100%.

    So I know that poses a problem. Using JS magic beans, can a scrollbar be forced in this situation?

    I am also posting this in the CSS forum to find out if there is a NON JS solution.

    Thanks,
    Bryan

    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>
    Last edited by jag5311; Jun 14, 2006 at 06:11.


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
  •