Why won't my footer stay at the bottom of the page?

Question

just trying to figure out why I cannot get the footer to the bottom of the page (when the "latest" articles are in a 3x2 grid). I have posted all my HTML and CSS here because I am not sure where the problem is specifically.

Here is my HTML:

<html>
<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
  <title></title>
</head>
<body>
  <div id="container">
    <header>
    </header>
    <div id="containerLarge">
      <h1 class="heading">
      </h1>
      <article id="featured">
        <div class="button">
        </div>
      </article>
      <h1 class="heading">
      </h1>
      <div class="containerMedium">
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
      </div>
    </div>
    <footer>
    </footer>
  </div>
</body>
</html>

I think the problem is somewhere here maybe the "containerMedium" and "latest" classes.

Here is my CSS:

/*CSS RESET*/

html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td,
embed, footer, header, nav{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*CSS RESET*/

html, body{
    height:100%;
}

#container{
    position: relative;
    height: 100%;
    min-height: 100%;
    background-color: tomato;
}

header{
    height: 100px;
    width: 100%;
    background-color: slateblue;
}

#containerLarge{
    padding-bottom: 100px; /*Footer Height*/
    height: 75%;
    width:100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.heading{
    height: 50px;
    width: 100%;
    background-color: pink;
}

#featured{
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    height: 300px;
    width: 600px;
    background-color: royalblue;
}

.button{
    display: inline-block;
    margin-right: 30px;
    margin-top: 220px;
    height: 50px;
    width:200px;
    background-color: gold;
    border-radius: 25px;
}

.containerMedium{
    display: block; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 600px;
    width: 50%;
    background-color: crimson;
}

.latest{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 200px;
    background-color: springgreen;
}

footer{
    position: absolute;
    bottom: 0px;
    height: 100px;
    width: 100%;
    background-color: deeppink;
}

Thanks for your help!

Josh

score 0 · Answer 1 · answered Nov 20 '17 at 23:00

Couple things. 1) your containerlarge div which is containing the footer has height on it. No need get rid of it. 2) your footer has absolute positioning but there is no relative container to it which is causing it to overlay on top of the elements. any position property completely ignores the regular flow of the document. I updated your code.

HTML

/*CSS RESET*/

html, body, div, span,
h1, h2, h3, h4, h5, h6,
p, a, img, ol, ul, li,
table, tbody, tfoot, thead, tr, th, td,
embed, footer, header, nav{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*CSS RESET*/

html, body{
    height:100%;
}

#container{
    position: relative;
    height: 100%;
    min-height: 100%;
    background-color: tomato;
}

header{
    height: 100px;
    width: 100%;
    background-color: slateblue;
}

#containerLarge{
    padding-bottom: 100px; /*Footer Height*/
    width:100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.heading{
    height: 50px;
    width: 100%;
    background-color: pink;
}

#featured{
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    height: 300px;
    width: 600px;
    background-color: royalblue;
}

.button{
    display: inline-block;
    margin-right: 30px;
    margin-top: 220px;
    height: 50px;
    width:200px;
    background-color: gold;
    border-radius: 25px;
}

.containerMedium{
    display: block; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 50%;
    background-color: crimson;
}

.latest{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 200px;
    background-color: springgreen;
}

footer{
    height: 100px;
    width: 100%;
    background-color: deeppink;
}

<html>
<head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
  <title></title>
</head>
<body>
  <div id="container">
    <header>
    </header>
    <div id="containerLarge">
      <h1 class="heading">
      </h1>
      <article id="featured">
        <div class="button">
        </div>
      </article>
      <h1 class="heading">
      </h1>
      <div class="containerMedium">
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
      </div>
    </div>
    <footer>
    </footer>
  </div>
</body>
</html>

score 0 · Answer 2 · answered Nov 20 '17 at 23:02

It's all because of the height of your inner elements. The 100% height is calculated by browser before rendering the pixel height of the container and article elements, they are larger than real 100% height of the screen.

Move your <footer> outside of the id="container" (exactly: below the "container") div and remove absolute position in the css for the footer, it will work fine.

score 0 · Answer 3 · answered Nov 20 '17 at 23:08

If you want your footer at the bottom of the browser-screen an it should stay there, then CSS for the footer is:

footer{
position: fixed; /* Instead of 'absolute' */
bottom: 0px;
height: 100px;
width: 100%;
background-color: deeppink;
}

If you want your footer just at the bottom of the page, then CSS for the footer is like this:

footer {
height: 100px;
width: 100%;
background-color: deeppink;
}

With fixed footer it looks like this:

#container{
    position: relative;
    height: 100%;
    min-height: 100%;
    background-color: tomato;
}

header{
    height: 100px;
    width: 100%;
    background-color: slateblue;
}

#containerLarge{
    padding-bottom: 100px; /*Footer Height*/
    height: 75%;
    width:100%;
    background-color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.heading{
    height: 50px;
    width: 100%;
    background-color: pink;
}

.containerMedium{
    display: block; 
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 600px;
    width: 50%;
    background-color: crimson;
}

.latest{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 300px;
    width: 200px;
    background-color: springgreen;
}

footer{
    position: fixed;
    bottom: 0px;
    height: 100px;
    width: 100%;
    background-color: deeppink;
}

  <div id="container">
    <header>
    This is the header
    </header>
    <div id="containerLarge">
      <h1 class="heading">
      Content Start
      </h1>
      <div class="containerMedium">
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
        <article class="latest">
        </article>
      </div>
    </div>
    <footer>
    Fixed footer
    </footer>
  </div>
</body>
</html>

Why won't my footer stay at the bottom of the page?

3 Answers3