Question

I have a long list of elements which I would like to scroll while keeping the rest of the page static around it.

<header>
  <!-- the header is stuck to the top of the page -->
</header>
<ul class="list">
  <!-- long list of stuff which should scroll -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- ... and so on, hundreds of elements -->
</ul>
<footer>
  <!-- the footer is stuck to the bottom of the page -->
</footer>

Now this seems to work as long as I set a height on the <ul>.

ul.list {
  overflow: auto;
  height: 700px;
}

The problem is that if the user’s browser is taller than 700px + [header height] + [footer height] then ul.list won’t take up all of it’s available space. There is a gap between the list an the footer. Conversely, if the user’s browser is smaller than 700px, some of the list elements are hidden off the bottom of the page.

How can I make the list take up all of the available height?

The only way I can think of so far is to detect the $header.offset() and $footer.offset(), subtract them to get the distance between them and set the height of the ul everytime the window resize event is triggered. This seems like an overly complicated solution to what seems like it should be a simple problem. Is there a better way?

By the way, this is the styling I have applied to make the fotter stick to the bottom of the page.

footer  {
  // stick the footer to the bottom of the page
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
}

Answer 1

If you know know the height of the header and footer and can absolutely position the list, it’s simple enough:

ul.list {
  overflow: auto;
  position: absolute;
  top:    [height of header]px;
  bottom: [height of footer]px;
}

If you want the list to have a fixed width, and keep it centered, you can do:

ul.list {
  overflow: auto;
  position: absolute;
  top:    [height of header]px;
  bottom: [height of footer]px;

  left:  50%;      
  width: 600px;  /* as an example */
  margin-left: -300px; /* negative half of the width */
}