468,257 Members | 1,509 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,257 developers. It's quick & easy.

how to make a scrollable div with percentage height

here is a sample of my problem

Expand|Select|Wrap|Line Numbers
  1. <table style="width:100%;height:100%">
  2.             <tr style="height: 60%">
  3.                 <td style="width: 968px">
  4.                     <div style="height: 100%;overflow:scroll;">
  5.                         <div style="height: 100px;" >
  6.                             content
  7.                         </div>
  8.                         <div style="height: 100px" >
  9.                             content
  10.                         </div>
  11.                     </div>
  12.                 </td>
  13.             </tr>
  14.             <tr style="height: 40%"><td style="width: 968px"><div style="height: 100%;overflow:scroll">
  15.                         <div style="height: 300px" >
  16.                             content
  17.                         </div>
  18.                         <div style="height: 300px" >
  19.                             content
  20.                         </div>
  21.                     </div></td></tr>
  22.         </table>
  23.  
i am not able to see the scroll bar in action at any time as it is getting expanded.
i dont want to have height in pixels as it may result in indifferent sizes in monitors with different resolutions.

please suggest me a solution for this.
Feb 20 '08 #1
11 6595
harshmaul
490 Expert 256MB
Which browser are you using?
Feb 20 '08 #2
i am using internet explorer
Feb 20 '08 #3
can anyone help me out in this issue
Feb 21 '08 #4
harshmaul
490 Expert 256MB
have you tried filling out the divs with content?,

that should make the scrolling bars work
Feb 21 '08 #5
ya i did that but it is not working so i am looking for a solution for my problem
Feb 21 '08 #6
harshmaul
490 Expert 256MB
I'm looking for a solution too...

Please post your code with the content in the div... chances are the content isn't taking up 300px worth of space.

The content you placed in the posted example is not sufficient to force the overflow.
Feb 21 '08 #7
what exactly is i divided my entire space to 2 rows with 60% and 40% and now i am including div's inside the rows and made them to scroll by using overflow property.if i fix the heigh of the div in pixels i can get the result but it will not fit to screens with different resolutions
Feb 21 '08 #8
harshmaul
490 Expert 256MB
I under stand now!!!

Perfect, set the div to have a position of fixed!

so in the div's styles add this... position:fixed
You may need to tweek the sizes though.
Feb 21 '08 #9
drhowarddrfine
7,435 Expert 4TB
position:fixed does not work in IE6. It does work in IE7 but can cause 'haslayout' issues.
Feb 21 '08 #10
drhowarddrfine
7,435 Expert 4TB
Try setting the height of the containing div in percent instead of px.
Feb 21 '08 #11
even though i fix the div size to percentages it does't reflect the look the feel as the content within div is in pixels. i even tried fixing the entire controls in percentages and ended in a islanded position still
Feb 22 '08 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Thomas Mlynarczyk | last post: by
8 posts views Thread by Vic | last post: by
25 posts views Thread by Michael Schuerig | last post: by
22 posts views Thread by Les Juby | last post: by
reply views Thread by Quivis | last post: by
6 posts views Thread by Hacking Bear | last post: by
reply views Thread by kermitthefrogpy | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.