Preface

Unfortunately I can’t recall where I found the initial implementation. Anyway, from somewhere I copied some CSS class definition to create a footer that is fixed at bottom of a web page, no matter how high the browser window and the page’s content is.

When using this in my ASP.NET MVC 5 Web application (that was based on Bootstrap, I noticed that, when I resized the browser window by making it narrower and less high, the footer was overlapping some of the page’s content when the page’s content needs to be scrolled.

My first thought was that something with Bootstrap went wrong. But later on I learned that Bootstrap was not involved here.

Because it took me some time to find a work-around, I will describe it here for later re-use.

The Footer Definition

The CSS Class

The CSS definition I found in the Web looks like this:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the minimum height of the footer here */
  min-height: 60px;
  background-color: rgb(238, 238, 238);
}

The Footer Definition

The class was used like this by the _Layout.cshtml file:

<footer class="footer">
  <p>© @DateTime.Now.Year by proccelerate GmbH</p>
</footer>

Explanation

I found the explanation for the observed behavior on Stack Overflow:

“…[position: absolute]… takes your element out of the document’s regular flow, so there’s no way for the text to have any positional-relationship with it, unfortunately.”

I found a JavaScript based attempt to solve this here, but it did not worked correctly in my app.

Workaround

Well, at least I added a “filler” below the page’s redenred body that makes sure there will be enough space for the footer in case the content of the page needs to be scrolled.
Maybe the height of the filler needs to be adjusted in your code. This depends on your page’s content.

This is the changed content of the _Layout.cshtml file (snipped):

<div class="container body-content">
  @RenderBody()
  <div style="height:45px;"></div>
</div>

Links

Bootstrap

Stack Overflow: bootstrap footer hiding contents above it

Stack Overflow: Stop absolutely positioned div from overlapping text