SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help coding a scrolling div with variable height

    I'm trying to create a scrolling div with the position:absolute property, and I'm having a problem getting the HTML to work right.

    The files in the attached archive illustrate what I've got so far. You can see the result at http://jhsachs.com/f/FixedParts.html.

    The div scrolls as it should, but its size is fixed. The width is supposed to be fixed, but I want the height to resize with the window. Can anyone show me how to do that without breaking the scrolling?
    Attached Files Attached Files

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Trying the following

    Code CSS:
    html {
        height: 100%;
        min-height: 100%;
    }
     
    body {
        height: 100%;
        margin: 0;
    }
     
    #mainContainer {
        height: 100%;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chris, thanks for your interest. That made a difference, but it didn't produce the result I wanted. The maincontainer div extends to the bottom of the page, but the scrolling area's height is still fixed.

    I tried adding height:100% to bodyOuter, but that made no difference, and when I added it to bodyInner the content ceased to appear.

    In case it matters, I was using Firefox 10.


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
  •