CODEWITHSUNDEEP
htmlcsssize
sixtyfootersdude
sixtyfootersdude

Reputation: 27231

CSS: Size divs so middle div uses all remaining space

I am trying to make a div that contains three divs. The first and last div should be sized based on their contents. If they contain 10 lines of text they should be large enough to show that without overflowing or scrolling.

The middle div should use the remaining amount of space and should use a scrollbar when there is not enough space to show its entire contents.

I have gotten a partial solution where the first and third blocks are fixed and the third block will use the remaining size. I am not sure how to make the jump to allow the first and third blocks to be sized based on their contents.

Any tips on how to do this would be greatly appreciated.

This is what I have so far:

enter image description here

<html>

    .outerDiv{
        /* The contents of this don't really matter */
        position: absolute;
        height:400px;
        top:25px;
    }

    .innerA{
        position: absolute;
        top:0ex;
        height:3ex; /* How can I set this based on the contents of the div? */
    }

    .innerB{
        position: absolute;
        top: 4ex; /* This needs to be based on the size of innerA */
        bottom: 4ex; /* This needs to be based on the size of innerC */
        overflow-y: scroll;
    }

    .innerC{
        position: absolute;
        height:3ex; /* How can I set this based on the contents of the div? */
        bottom:0ex;
    }

    </style>


    <div class="outerDiv" style="width:100%; border:1px solid #888888;">

        <div class="innerA" style="width:70%; border:1px solid #000088;"></div>

        <div class="innerB" style="width:60%; border:1px solid #008800;">a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>vv</div>

        <div class="innerC" style="width: 50%;border:1px solid #001100;"></div>

    </div>


</html>

My preference would be to solve the problem using:

  1. CSS & HTML
  2. Pure & Standard JS
  3. JS with dojo
  4. Other methods

Upvotes: 3

Views: 124

Answers (1)

Kristen Waite
Kristen Waite

Reputation: 1465

If you don't mind jquery, you can calculate the heights of the A and C divs and then subtract from your outerDiv:

$(".innerB").each(function() {
   var outerDivHeight = $('.outerDiv').outerHeight();
   var innerAHeight = $('.innerA').outerHeight();
   var innerCHeight = $('.innerC').outerHeight();
   var innerBHeight = outerDivHeight - innerAHeight - innerCHeight;
   $(this).css("height", innerBHeight);
});

Here's a fiddle for it: http://jsfiddle.net/Sz6CL/

Upvotes: 1

Related Questions