CODEWITHSUNDEEP
htmlcss
n92
n92

Reputation: 7602

How to avoid the fixed footer overlapping with the vertical scroll bar appears between header and footer

I have below example where the footer is at the bottom and it overlaps with the vertical scroll bar.

I have some pages where the vertical scroll bar would not be there (the inner content would be less). pages with no vertical scroll bar have no issues but pages with vertical scroll bar would have overlapping footer. So How to make footer display works properly irrespective of the vertical scroll bar.

Codepen example

Or view the demo below: 

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  overflow: hidden;
}
header {
  background: red;
  text-align: center;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  border: 10px solid black;
  color: white;
}
#content {
  position: absolute;
  margin: 0px;
  left: 363px;
  right: 0px;
  top: 120px;
  bottom: 1px;
  width: 1557px;
  z-index: 0;
  padding: 10px;
  border: 1px solid rgb(187, 187, 187);
  overflow: auto;
  display: block;
  visibility: visible;
  background: rgb(255, 255, 255);
}
#content-inner {
  height: 844px;
  overflow: auto;
  width: 100%;
  right: 0;
  left: 0;
  position: absolute;
}
footer {
  background: blue;
  color: white;
  height: 80px;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border: 5px solid green;
  z-index: 999999;
}
<!DOCTYPE html>
<html>

<head>
  <title>CSS - Width</title>


</head>

<body>
  <header>
    Header
  </header>
  <div id="content">
    <div id="content-inner">
      scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>content outside
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>scrollable content
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>End
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>Actual End

    </div>
    <footer>
      Footer
    </footer>
</body>

</html>

Upvotes: 0

Views: 3527

Answers (2)

chrisv
chrisv

Reputation: 725

I quite like this solution:

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  color: #fff;
  background-color: #000;
}

/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
   margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

Check it out in code-pen: http://codepen.io/anon/pen/xVbbaw

Edit: New codepen with updates as asked in comments below. It will now remove margin on body and content div, so that height of content fills the empty space of where the footer was located: http://codepen.io/anon/pen/qZEYyO

Upvotes: 2

Mofarjul Molla
Mofarjul Molla

Reputation: 114

give margin bottom or padding bottom to #content-inner.....

#content-inner{margin-bottom: 110px}

margin-bottom = (footer height + some extra pixels)....

Upvotes: 0

Related Questions