Jonathan Allen Grant Jonathan Allen Grant - 4 months ago 8
HTML Question

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

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?

Answer

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.