SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    scroll box (div) to take up the remaining height of a container

    This doesn't seem like it should be complicated to achieve, but I can't quite figure it out...

    I have a container (div) of a set height with 3 divs vertically stacked inside.

    the 1st div and the 3rd div have height:auto.. (content is dynamic).

    the 2nd div I want to fill up the remaining space in the container, and if it's content can't fit, I want it to create scroll bars.

    markup:

    Code HTML4Strict:
    <div id="container">
      <div id="div1">some dynamic content</div>
      <div id="div2">dynamic, scrollable content</div>
      <div id="div3">again, some dynamic content</div>
    </div>

    what is the proposed css?
    Code CSS:
    #container {
      height:300px;
    }
    #div1 {
      height:auto;
    }
    #div2 {
      height: ???????
      overflow:auto;
    }
    #div3 {
      height:auto;
    }

    Any thoughts anyone? What height value do I set to div2?
    Is there a pure CSS solution to this, or is javascript the only way? (grab heights of div1 & div3 -- subtract the sum from container-height)

    thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think this is impossible in CSS even using tables because the height is unknown for the middle element and therefore the overflow has no way to work.

    As you said above I think you will have to grab the heights with script and subtract them etc.

    The nearest I ever got to something like this was based on 100&#37; height and known heights.

    http://www.pmob.co.uk/temp/hundredpercent-space2.htm

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah -- I figured this was impossible to do as a pure CSS solution. Was hoping that someone would know some CSS magic to do what was needed, but I guess CSS is still a bit lacking.

    Thanks for the reply.


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
  •