How do I make a scrollable div match the height of the browser minus the footer?

Question

I made a replicable version of what I am doing on JSFiddle: https://jsfiddle.net/deoa0cyo/1/

I have in the html

<div class="container">
  <div class="top">
    <img class="top-img" src="http://www.reunitingall.com/wp-content/uploads/2015/01/Cat-Sun-God-640x388.jpg" />
    <h3>
      Group Cats
    </h3>
  </div>
  <div class="bottom">
    <ul>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
      <li>one cat</li>
      <li>two cats</li>
      <li>green cats</li>
      <li>blue cats</li>
    </ul>
  </div>
</div>
<footer class="footer">
  footer text! Wooohoooo
</footer>

but the footer overlaps with my bottom div. I want the bottom div to be as big as possible, without overlapping my floating footer. How can I make this happen?

you can use `vw` in styles (minus the height of your footer) e.g. say your footer is `1vh` then your height of `div` can be `90vh` — batmaniac7, Jul 07 '16 at 18:09
How about this? https://jsfiddle.net/Nekomajin42/Ljf8mk9d/1/ — Nekomajin42, Jul 07 '16 at 18:16

Nathan · Accepted Answer · 2016-07-07T18:41:30.867

You can do multiple things. In the example you gave us, the best thing to do is this:

.container {
    width: 300px;
    padding-bottom: 50px;
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background-color:white;
}

JSFiddle

This adds a padding-bottom: 50px to .container. The amount of padding should be the same as as the height of the footer. This also adds a background-color: white to the footer, and white should of course be the color that would've been behind the text.

When this is not possible you can set the height of .container to calc(100vh - 50px) And add overflow-y: scroll. You will have scrollbars at the side of .container. Also note that calc() will not work on all browsers.

You can hide the scrollbars using the answers to this question.

score 0 · Answer 2 · answered Jul 07 '16 at 18:14

0

Try this

.footer { transform:translate(x,y);

}

example

.footer{ transform:translate(500px,700px) }

answered Jul 07 '16 at 18:14

The correct value to use would be (0px, 50px), but since the element is fixed to the bottom this moves it off-screen. – Nathan Jul 07 '16 at 18:37
It just an example. – Jul 12 '16 at 19:07

score 0 · Answer 3 · answered Jul 07 '16 at 18:40

Set overflow of body to hidden and set overflow on container div. Also set height of container div to 100% - footerHeight

I have made these changes plus some minor changes. Check if you are looking for something like this:

https://plnkr.co/edit/h0W0NxFPkNl4HtUhlgDP?p=preview

How do I make a scrollable div match the height of the browser minus the footer?

3 Answers3