CODEWITHSUNDEEP
css
KutaBeach
KutaBeach

Reputation: 1495

Stretch div between header and footer

The task I encountered looks standard: I have a fixed height container and 3 div's inside it. I want the 2nd div to be stretched between the top and the bottom div's. When the contents of the 2nd div overflows - I would like to show the scroll bars.

I know how to accomplish this task using the absolute positioning. A question is: can I do it using the table on divs?

An additional requirement: if possible, I would like to avoid setting header's height as fixed.

I have tried to code it in my fiddle, but, as you see, I failed.

CSS:

.container {
    height: 500px;
    background-color: gainsboro;
}

.table {
    display: table;
    height: 100%;
}

.table > div {
    display: table-row;
}

.table > div > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
    overflow: scroll;
}

.center > div {
    height: 100%;
}

.content {
    height: 700px;
}

HTML:

<div class="container">
    <div class="table">
     <div>
         <div>XXX</div>
     </div>
     <div class="center">
         <div>
             <div class="content"></div>
         </div>
     </div>
     <div>
         <div>YYY</div>
     </div>
    </div>
</div>

Upvotes: 2

Views: 3317

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

Here is one possible solution:

<div class="container">
    <div class="header">
        <div>Top Header Block</div>
    </div>
    <div class="center">
        <div class="content">
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </div><!-- .content -->
    </div><!-- .center -->
    <div class="footer">
        <div>Bottom Footer Block</div>
    </div>
</div>

and the CSS: 

.container {
    height: 200px;
}
.header, .footer {
    background-color: gainsboro;
}
.center {
    height: inherit;
}
.content {
    background-color: #F0F0F0;
    height: inherit;
    overflow: auto;
}

Since you are fixing the height of the container, you inherit the height both in the .center and the .content <div>'s.

If you tweak the container height, the center div expands but the header and footer div's stay the same height.

Use overflow on the content div to allow for scrolling.

Fiddle Reference: http://jsfiddle.net/audetwebdesign/nae5z/

Upvotes: 1

Linus Caldwell
Linus Caldwell

Reputation: 11058

Your way was right, just make a few changes (See this Fiddle):

html, body, .container, .table {
    margin: 0;
    height: 100%;
}

#header,#footer {
    height: 1px;
}

This should work because tables cells get increased in height if the content needs it.

Just a hint: You may improve the whole thing, for example I would use HTML 5 and the <header/> and <footer/> elements. But that was not part of your question. Anyway, here is another update to your fiddle:

 <div>
      <header>
          <div>XXX</div>
      </header>
      <main>
          <div>
              <div class="content"></div>
          </div>
      </main>
      <footer>
          <div>YYY</div>
      </footer>
 </div>

With CSS:

html, body, body > div {
    margin: 0;
    height: 100%;
}

body {
    background-color: gainsboro;
}

body > div {
    display: table;
    width: 100%;
}

body > div > * {
    display: table-row;
}

body > div > * > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

header, footer {
    height: 1px;
}

main is very new to HTML 5, just if you're wondering.

Upvotes: 1

Related Questions