HTML footer overlapping with content

Question

I have tried my html page footer is overlapping the body container.

here my html code with footer css.

<html>
  <head>
    <style>
         .footer {position: fixed;overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}    
    </style>
  </head>
<body>

      <div class="container">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div><br>
 <div class="footer">
      <ul class="copy inline text-center">
        <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
        <li>All Rights Reserved</li>
      </ul>
 </div>
</body>
</html>

Have a look here width a margin on the bottom http://stackoverflow.com/questions/18915550/fix-footer-to-bottom-of-page — Daniel, Feb 11 '17 at 16:57
You have set your footer to `fixed` `bottom: 0`. That will make your footer always stick to the bottom of the screen. If you have a lot of content in the `container` then the footer will overlap. Fix it by removing `position: fixed` — TheYaXxE, Feb 11 '17 at 17:12
Stack Overflow is aimed at helping programmers become better at their job, not at providing free coding services. If you don't understand what that `CSS` does you hardly qualify as a programmer. From my perspective, you are just a client trying to get tasks done without paying. If you're actually a programmer trying to learn, SO is really not the best place to start. You need to learn the basics first. Besides, a simple search on Google will provide you with the answer. — tao, Feb 11 '17 at 17:20

score 2 · Answer 1 · answered Feb 11 '17 at 17:16

You need reset your styles. Just add margin: 0; to body. https://jsfiddle.net/36q5a7kw/

      <div class="container">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div><br>
 <div class="footer">
      <ul class="copy inline text-center">
        <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
        <li>All Rights Reserved</li>
      </ul>
 </div>


body{
  margin: 0;
}
.footer {
  position: fixed;
  overflow: hidden;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
 }

score 1 · Answer 2 · answered Feb 11 '17 at 17:22

Overlapping is caused by making footer's position fixed. try this code:

<html>
<head>
<style>
      </style>
.footer {overflow: hidden;right: 0;bottom: 0;left: 0;z-index: 9999;}    

 </head>
<body>

  <div class="container">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div><br>
 <div class="footer">
  <ul class="copy inline text-center">
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
    <li>All Rights Reserved</li>
  </ul>
</div>
</body>
</html>

score 1 · Accepted Answer · answered Feb 11 '17 at 17:45

Not exactly sure of what you want. But if you want to prevent your footer from overlapping your container, you can solve it with these solutions:

Stick footer to bottom of page:

With this solution, the footer will always stick to the bottom of the page (not the window). If you don't have much content the footer will be at the bottom of the window, and if the content expands, the footer will move along.

html,
body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100%;
  height: auto;
  margin-bottom: -60px;
  box-sizing: border-box;
}

.container:after {
  display: block;
  content: '';
  height: 60px;
}

ul {
  padding: 0;
  margin: 0;
}

.footer {
  height: 60px;
  background: red;
}

<div class="container">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
  <ul class="copy inline text-center">
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
    <li>All Rights Reserved</li>
  </ul>
</div>

Working Fiddle

Stick footer to bottom of window:

The second solution is almost the same as yours, using position: fixed. To prevent overlapping with the content, you set a padding-bottom on .container as the same value as your footers height.

body {
  padding: 0;
  margin: 0;
}

.container {
  padding-bottom: 60px;
  box-sizing: border-box;
}

.footer {
  height: 60px;
  position: fixed;
  overflow: hidden;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: red;
}

<div class="container">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="footer">
  <ul class="copy inline text-center">
    <li>©2016 - 2017 <a href="http://Example/"> Example</a></li>
    <li>All Rights Reserved</li>
  </ul>
</div>

Working Fiddle

HTML footer overlapping with content

3 Answers3

Linked