how to make a scrollable div with percentage height

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • sariset
    New Member
    • Feb 2008
    • 6

    how to make a scrollable div with percentage height

    here is a sample of my problem

    [CODE=html]<table style="width:10 0%;height:100%" >
    <tr style="height: 60%">
    <td style="width: 968px">
    <div style="height: 100%;overflow:s croll;">
    <div style="height: 100px;" >
    content
    </div>
    <div style="height: 100px" >
    content
    </div>
    </div>
    </td>
    </tr>
    <tr style="height: 40%"><td style="width: 968px"><div style="height: 100%;overflow:s croll">
    <div style="height: 300px" >
    content
    </div>
    <div style="height: 300px" >
    content
    </div>
    </div></td></tr>
    </table>
    [/CODE]
    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.
    Last edited by eWish; Feb 20 '08, 02:17 PM. Reason: Added Code Tags
  • harshmaul
    Recognized Expert Contributor
    • Jul 2007
    • 490

    #2
    Which browser are you using?

    Comment

    • sariset
      New Member
      • Feb 2008
      • 6

      #3
      i am using internet explorer

      Comment

      • sariset
        New Member
        • Feb 2008
        • 6

        #4
        can anyone help me out in this issue

        Comment

        • harshmaul
          Recognized Expert Contributor
          • Jul 2007
          • 490

          #5
          have you tried filling out the divs with content?,

          that should make the scrolling bars work

          Comment

          • sariset
            New Member
            • Feb 2008
            • 6

            #6
            ya i did that but it is not working so i am looking for a solution for my problem

            Comment

            • harshmaul
              Recognized Expert Contributor
              • Jul 2007
              • 490

              #7
              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.

              Comment

              • sariset
                New Member
                • Feb 2008
                • 6

                #8
                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

                Comment

                • harshmaul
                  Recognized Expert Contributor
                  • Jul 2007
                  • 490

                  #9
                  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.

                  Comment

                  • drhowarddrfine
                    Recognized Expert Expert
                    • Sep 2006
                    • 7434

                    #10
                    position:fixed does not work in IE6. It does work in IE7 but can cause 'haslayout' issues.

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434

                      #11
                      Try setting the height of the containing div in percent instead of px.

                      Comment

                      • sariset
                        New Member
                        • Feb 2008
                        • 6

                        #12
                        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

                        Comment

                        Working...