Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How to expand div's height to automatically fill up available space?

    Hello folks,

    Newbie here, so kindly pardon me if this is a repetitive question and provide me any links if already available as a solution.

    Here is the problem. I have a HTML like this:

    <div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    </div>


    My supportive CSS is:

    #parent {
    width: 200px;
    height: 100%; // assuming inheritance from parent
    }

    #child1 {
    width: 100%;
    height: 100px;
    }

    #child2 {
    width: 100%;
    // need the height to automatically occupy remaining space.
    }


    Explanation: I have a parent div that has its dimensions perfect. I need to have 2 children divs inside this. The first child div shall have a 100% width and a fixed (eg. 100px) height. The second div (100% width) needs to auto expand it's height to fill up the remaining space in the parent div. How/what parameter can accomplish this?

    Thanks in advance.

    Praveen Selvam

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Frank,

    Thanks for the link. I just went through them. The solution provided includes scripts from a couple of sources. That's good news. But I'm interested in a purely CSS solution. It could be great if I could get some ideas on those lines as well!

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by praveen.selvam View Post
    How/what parameter can accomplish this?
    I’m assuming that you mean “CSS rules” by “parameter”.

    Solution 1

    Code:
    #parent { position: relative; width: 200px; height: 100%; }
    #child1 { height: 100px; }
    #child2 { position: absolute; top: 100px; left: 0; right: 0; bottom: 0; }
    The above code assumes that #parent’s height will always be tall enough to encompass the content of both #child1 and #child2 (since absolutely positioned elements do not affect content flow and, thus, the dimensions of their parent elements). Do note that, however, that Internet Explorer 6 (but not 7) only supports the setting of two of the four shown directional properties at a time so this technique will not work in that browser.

    Solution 2

    Code:
    #parent { display: table; width: 200px; height: 100%; border-collapse: collapse; }
    #child1 { display: table-row; height: 100px; }
    #child2 { display: table-row; }
    This solution should work in every major browser except Internet Explorer up to the latest release version (7) since that browser doesn’t support table display property values.

    Solution 3

    Code:
    #parent { position: relative; width: 200px; height: 100%; }
    #child1 { position: absolute; top: 0; left: 0; right: 0; height: 100px; }
    #child2 { height: 100%; padding: 100px 0 0; }
    This solution is the most likely to be cross‐browser compatible. The second line can be changed to be less dynamic (i.e., use the width property instead of the directional properties) for MSIE6 compatibility.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    praveen.selvam (06-25-2008)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here is another source which may help with css Faux Columns.

    and yet another.

    Frank
    Last edited by effpeetee; 06-25-2008 at 08:43 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    praveen.selvam (06-25-2008)

  • #6
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    @Arbitrator & @Frank: Thank you for your efforts. Both links have good suggestions for the target I'm trying to achieve. Especially Solution 3 provided by Arbitrator is very close.

    Let me take this to the next level.

    We are considering 2 types of divs here:
    #child1: fixed dimensions
    #child2: auto expand height to fill remaining space

    My problem shall have any number of child1 type of divs surrounding (read above and below) the only child2 div. Considering this, the padding tactics proposed until now may not be the best solution.

    Any thoughts? Thanks again in advance.

    Here is a sample code:

    HTML:

    <div id="parent">
    <div class="fixedDiv"></div>
    <div class="fixedDiv"></div>
    <div class="fillSpace"></div>
    <div class="fixedDiv"></div>
    <!-- fixedDiv can still be replicated. Consider such scenarios. -->
    </div>


    CSS:

    #parent {
    width: 200px;
    height: 100%; // assuming inheritance from parent
    }

    .fixedDiv {
    width: 100%;
    height: 100px;
    }

    .fillSpace {
    // ???
    }

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by praveen.selvam View Post
    Considering this, the padding tactics proposed until now may not be the best solution.
    I’m thinking that this is the only purely CSS‐based solution that you’ll get to work in MSIE6 aside from faking things a la faux columns with backgrounds. (Of course, the latter solution has a large number of limitations.)

    Solution 2 in my previous post is the preferred solution, but, as mentioned, it has compatibility issues. Solution 1 is not exactly dynamic; you’d have to change the top and bottom property values every time you changed the number of boxes above and below the stretchy box.

    Otherwise, I think you’d have to resort to serving content based on browser and/or browser version (e.g., via conditional comments), dynamic CSS via scripting (which typically also requires some alternative for fallback to take care of accessibility issues), or abusing HTML or XHTML tables by using them for layout purposes.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright guys, things are pretty clear now. I'll take my call on what needs to be done. A big thank you to both of you who've helped me out!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •