CODEWITHSUNDEEP
htmlcssfooter
Nick Wright
Nick Wright

Reputation: 125

Force footer to stay at bottom of page

Currently, i've got a footer at the bottom of the viewpoint but i'd like it to be at the bottom of the webpage. I'd like this because it overlaps most of the content on each page. How can I change the below HTML and CSS to fix this? 

body {
    background-color: #40E39C;
    }
#nav-menu a {
    text-align: center;
    padding: 30px 45px 30px 45px;
    }
#nav-menu ul{
    margin-bottom: 100px;
    text-align: center;
}
#nav-menu li {
    display: inline-block;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
    padding: 30px 45px 30px 45px;
    }  
.footer {
    background-color: #EAEDD0;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    }
.footer li {
    display: inline-block;
}
.footer ul {
    text-align: center;
}
<body>
    <div id="nav-menu">
        <ul>
            <li><a href="./a.php">A</a></li>
            <li><a href="./b.php">B</a></li>
            <li><a href="./c.php">C</a></li>
            <li><a href="./d.php">D</a></li>
            <li><a href="./e.php">E</a></li>
            <li><a href="./f.php">F</a></li>
        </ul>
    </div>
    <footer class="footer">
        <ul>
            <li><a href="./a.php">A | </a></li>
            <li><a href="./b.php">B | </a></li>
            <li><a href="./c.php">C | </a></li>
            <li><a href="./d.php">D | </a></li>
            <li><a href="./e.php">E | </a></li>
            <li><a href="./f.php">F</a></li>
        </ul>
</footer>
</body>

UPDATE

I've removed the css 

position: fixed;
bottom: 0;
left: 0;

and added

display: relative;

to the body tag, but the footer still has some space between the bottom of the page and it.

body {
  background-color: #40E39C;
  position: relative;
}

#nav-menu a {
  text-align: center;
  padding: 30px 45px 30px 45px;
}

#nav-menu ul {
  margin-bottom: 100px;
  text-align: center;
}

#nav-menu li {
  display: inline-block;
  margin-top: 40px;
  border-style: solid;
  border-width: 1px;
  background-color: white;
  padding: 30px 45px 30px 45px;
}

.footer {
  background-color: #EAEDD0;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.footer li {
  display: inline-block;
}

.footer ul {
  text-align: center;
}
<body>
  <div id="nav-menu">
    <ul>
      <li><a href="./a.php">A</a></li>
      <li><a href="./b.php">B</a></li>
      <li><a href="./c.php">C</a></li>
      <li><a href="./d.php">D</a></li>
      <li><a href="./e.php">E</a></li>
      <li><a href="./f.php">F</a></li>
    </ul>
  </div>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  <p>a<p/>
  v
  <p>a<p/><p>a<p/>
  <p>a<p/>
  <p>a<p/>
  v
  v
  v<p>a<p/><p>a<p/><p>a<p/>
  <footer class="footer">
    <ul>
      <li><a href="./a.php">A | </a></li>
      <li><a href="./b.php">B | </a></li>
      <li><a href="./c.php">C | </a></li>
      <li><a href="./d.php">D | </a></li>
      <li><a href="./e.php">E | </a></li>
      <li><a href="./f.php">F</a></li>
    </ul>
  </footer>
</body>

Maybe this might help This is my gallery page. I hope you can find the problem a bit easier with this. 

#nav-menu a {
    text-align: center;
    padding: 30px 45px 30px 45px;
    }

#nav-menu ul{
    margin-bottom: 100px;
    text-align: center;
}

#nav-menu li {
    display: inline-block;
    margin-top: 40px;
    border-style: solid;
    border-width: 1px;
    background-color: white;
    padding: 30px 45px 30px 45px;
    }
    
.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
    }

.footer li {
    display: inline-block;
}

.footer ul {
    text-align: center;
    margin: 0;
}
<body>
    <head>
        <link rel="stylesheet" href="styles.css" type="text/css"/>
    </head>
    <div id="nav-menu">
    <ul>
        <li><a href="./a.php">A</a></li>
        <li><a href="./b.php">B</a></li>
        <li><a href="./c.php">C</a></li>
        <li><a href="./d.php">D</a></li>
        <li><a href="./e.php">E</a></li>
        <li><a href="./f.php">F</a></li>
    </ul>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom1.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom2.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom3.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom4.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <div style="clear: both;">
        <img src="images/hotelRoom5.jpg" width="360" height="210" style="float:left; padding: 0px 0px 20px 20px;"/>
        <img src="images/hotelRoom6.jpg" width="360" height="210" style="float:right; padding: 0px 20px 20px 0px"/>
    </div>
    <footer class="footer">
    <ul>
        <li><a href="./a.php">A | </a></li>
        <li><a href="./b.php">B | </a></li>
        <li><a href="./c.php">C | </a></li>
        <li><a href="./d.php">D | </a></li>
        <li><a href="./e.php">E | </a></li>
        <li><a href="./f.php">F</a></li>
    </ul>
    </footer>

</body>

Code snip of an attempt to fix. https://i.sstatic.net/5XV62.png

Upvotes: 4

Views: 3409

Answers (3)

Rajshree Khatri
Rajshree Khatri

Reputation: 71

Add this CSS:

body {
  position: relative;
}

Also add two CSS prop to your .footer class. So your .footer CSS will be like:

.footer {
  background-color: #EAEDD0;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
}

And this is working as I have checked it in code snip.

Upvotes: 4

Foysal Remon
Foysal Remon

Reputation: 301

Remove position:fixed from the .footer and also remove unnecessary left, bottom etc. Final styles for footer is: 

.footer {
    background-color: #EAEDD0;
    text-align: center;
    width: 100%;
}

Update for clearfix and Unwanted Margin

Problem is not on our solution. In your code snipped there are 2 other cause preventing you to get your expected result. You didn't use clearfix on right place and there is some small margin on body causing the space. The solution for clearfix is here:

div:after{
    content: "";
    display: table;
    clear: both;
}

You should give those style to every parent which having children with float left or right.

And as I am finding browser given margin on body the fix is to give:

body{margin: 0}

Upvotes: 0

Lead Developer
Lead Developer

Reputation: 1169

Remove the following code from .footer css

position: fixed;
bottom: 0;
left: 0;

Upvotes: 0

Related Questions