Is it possible to have an auto-height div footer with scrollable content area above?

Question

I am trying to create a container that has two sections - the top section will be a scrolling div that takes up 100% of the vertical height of it's container, minus the height of a sticky footer. The sticky footer cannot have a hardcoded height (because it will work in two modes with two different heights) which is where I'm troubled. I would prefer not to use js, only css if possible.

HTML

<div class="container">
   <div class="scrollArea">
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
      a<br/>b<br/>c<br/>d<br/>
   </div>
   <div class="footer">
      <!-- the contents of the footer will determine the height needed -->
   </div>
</div>

CSS

.container {
    position: relative;
    height: 100%;
    width: 100%;
}

.scrollArea {
    position: absolute;
    top: 0px;
    bottom [height of sticky footer]; left: 0px;
    right: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.footer {
    position: absolute;
    bottom: 0px;
    height: [height of sticky footer];
    left: 0px;
    right: 0px;
}

possible duplicate of [Flexbox and vertical scroll in a full-height app using NEWER flexbox api](http://stackoverflow.com/questions/14962468/flexbox-and-vertical-scroll-in-a-full-height-app-using-newer-flexbox-api) — cimmanon, Oct 04 '13 at 20:20

Blake Mann · Answer 1 · 2013-10-05T05:06:09.297

You don't want to be using position: absolute; on everything.. This will make it very difficult to style things because a absolute element technically has no height (from the perspective of other elements). You are further confusing things by using the "stretch technique" of using bottom, left, top and right all 0.

Your question is also a bit confusing in terms of how the height will be set.. Is it to be set through javascript? Through media queries? If it is either of those cases, you could easily set the height of the scroll area through the same method, allowing them to change in tandem.

If, for some reason you have to only set the height for this one element, you can let css table display properties do the work of calculating the new height for the scroll area, by setting the container as display: table;, and adding another wrapper around the scrollarea. Setting that wrapper and the footer to display: table-row; will get them laid out.

Check this out to see what I mean:

http://jsfiddle.net/6gprU/3/

Your code sample suggests that the height will be set, somehow.. though if this is not the case, and you absolutely cannot set the height (which would be the case if the content that went into the footer was dynamic and unpredictable in size) then you are making this increasingly difficult. In this case, it would depend on if the overall container height needs to stay a certain size. If it does, like I assume it would, then you may need to rethink your layout, as you have too many variables to be able to do it with pure css.

As a final addition to that, there is another option that would make this really easy. CSS has a feature called calc():

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

This feature allows you to perform calculations in css, much like you would in javascript, and would allow you to set the height of anything in relation to anything, dynamically. However, I put this last, as browser support is a bit limited. It will not work in IE 8 or below.

Check this site to see where it will work, and then make the decision as to wether this is a valid option for you or not.

http://caniuse.com/calc

Is it possible to have an auto-height div footer with scrollable content area above?

1 Answers1