By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,788 Members | 1,115 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,788 IT Pros & Developers. It's quick & easy.

how to make a scrollable div with percentage height

P: 6
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
Share this Question
Share on Google+
11 Replies


harshmaul
Expert 100+
P: 490
Which browser are you using?
Feb 20 '08 #2

P: 6
i am using internet explorer
Feb 20 '08 #3

P: 6
can anyone help me out in this issue
Feb 21 '08 #4

harshmaul
Expert 100+
P: 490
have you tried filling out the divs with content?,

that should make the scrolling bars work
Feb 21 '08 #5

P: 6
ya i did that but it is not working so i am looking for a solution for my problem
Feb 21 '08 #6

harshmaul
Expert 100+
P: 490
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

P: 6
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
Expert 100+
P: 490
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
Expert 5K+
P: 7,435
position:fixed does not work in IE6. It does work in IE7 but can cause 'haslayout' issues.
Feb 21 '08 #10

drhowarddrfine
Expert 5K+
P: 7,435
Try setting the height of the containing div in percent instead of px.
Feb 21 '08 #11

P: 6
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.