Geek asks and answers

Dynamically set element height to make it overflow: auto?

I have a long list of items that I would like to scroll through while preserving the rest of the page.

<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 it works as long as I set the height to <ul>.

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

The problem is that if the user's browser is higher 700px + [header height] + [footer height], then ul.listit will not take up all the free space. Between the list there is a footer. Conversely, if the user’s browser is smaller than 700pxthat, some list items are hidden at the bottom of the page.

How can I make a list occupying all available height?

, , - $header.offset() $footer.offset(), , ul resize, , , , . ?

, , , .

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

, :

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

, , :

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 */
}
+1

More articles:


All Articles