How to keep footer at bottom of the page?

HTML-CSS
1

Hi there,

I am doing a little project trying to make a home page. Got the header done and I am now working, well struggling with the footer.

Somehow it just wont stick at the bottom of the page. I want the footer to stick to the bottom of the page when there is not much main content. and I want it to be pushed down when there is alot of main content that a scroll bar is created.

but how? tried alot of things and ‘solutions’ from other websites and video’s but they don’t really seem to work.

here is my code, if anyone got any idea’s please enlighten me :joy:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Homepage</title>
    <meta charset="UTF-8">
    <meta rel="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <link rel="stylesheet" href="FooterShare.css">
    
</head>
<body>
    <div class="menu-bar">
        <div class="logo">
            <p><span id="span-a">E</span>ampleLogo<span id="span-nl">.com</span></p>
        </div>
<ul>
<li class="active"><img src="home.svg"> <a href="#">Home</a></li>  
<li><img src="info.svg"> <a href="#">Over</a></li>  
<li id="samp-li"><img src="edit.svg"> <a href="#">Samples</a> <img id="arrow" src="chevron-down.svg">
    <div class="sub-menu-1">
        <ul id="sub-ul">
            <li><a href="#">Sample 1</a></li>
            <li><a href="#">Sample 2</a></li>
            <li><a href="#">Sample 3</a></li>
            <li><a href="#">Sample 4</a></li>
            <li><a href="#">Sample 5</a></li>
            <li><a href="#">Sample 6</a></li>
            <li><a href="#">Sample 7</a></li>
            <li><a href="#">Sample 8</a></li>
            <li><a href="#">Sample 9</a></li>
            <li><a href="#">Sample 10</a></li>
            <li><a href="#">Sample 11</a></li>
            <li><a href="#">Sample 12</a></li>
            <li><a href="#">Sample 13</a></li>
            <li><a href="#">Sample 14</a></li>
            <li><a href="#">Sample 15</a></li>
        </ul>
    </div>
</li>  
<li><img src="mail.svg"> <a href="#">Contact</a></li>
</ul>
</div>

<div id="container">
    <div id="main">
        <p>Test Main Content Test Main Content Test Main Content Test Main Content </p>
    </div>
</div>

<footer id="footer">

</footer>  
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}

html, body {
    background-color: rgb(126, 126, 255);
    box-sizing: border-box;
    font-family: sans-serif;
    height: 100%;
}   


/* LOGO */
.logo {
    font-size: 15px;
    font-weight: bold;
    float: left;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 100;
    margin-top: 14px;
    margin-left: 55px;
}

#span-a {
    position: relative;
    bottom: 2px;
    right: 2px;
    font-size: 30px;
    font-family: 'Times';
    font-weight: 900;
    color: rgb(248, 140, 15);
}

#span-nl {
    font-size: 8px;
    font-weight: 900;
    font-family: 'times';
    color: rgb(248, 140, 15);
}
/*END OF LOGO*/


/*TOP MENU BAR*/
@media only screen and (max-width: 1000px) {
    .logo {
        display: none;
    }
}

@media only screen and (max-width: 750px) {
    .menu-bar > ul > li > a {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .menu-bar > ul  {
        width: 200px;
        height: 70px;
    }

    .sub-menu-1 {
        position: relative;
        top: 50px;
    }

    .sub-menu-1 ul {
        width: 90px;
    }

    .menu-bar ul li:hover .sub-menu-1 ul li:hover {
        width: 70px;
    }
}

.menu-bar {
    background-image: linear-gradient(#033747, #012733);
    text-align: center;
    border-bottom: 3px solid rgb(255, 128, 10);
}

.menu-bar ul {
    display: inline-flex;
    list-style: none;
    color: #fff;
    margin-right: 55px;
}

.menu-bar ul li {
    width: 120px;
    margin: 10px;
    padding: 10px;
}

.menu-bar ul li a {
    text-decoration: none;
    color: #fff;
}

.active, .menu-bar ul li:hover {
    background: rgb(1, 127, 201);
    border-radius: 3px;
}

img {
    vertical-align: bottom;
    width: 25px;
    height: 25px;
 }

 #arrow {
    width: 17px;
    height: 17px;
    vertical-align: middle;
 }

 .sub-menu-1 {
    display: none;
 }

 .menu-bar ul li:hover .sub-menu-1 {
    display: block;
    position: absolute;
    background: rgb(1, 127, 201);
    margin-top: 8px;
    margin-left: -10px;
 }

 .menu-bar ul li:hover .sub-menu-1 ul {
    display: block;
    margin: 0px;
 }

 .menu-bar ul li:hover .sub-menu-1 ul li {
    width: 120px;
    padding: 10px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
 }

 .menu-bar ul li:hover .sub-menu-1 ul li:hover  {
    background-color: rgb(255, 128, 10);
    box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.459);
    position: relative;
    bottom: 5px;
    right: 5px;
 }
/* END OF MENU BAR */


/* MAIN CONTENT */
 #container {
    min-height: 100%;
}

#main {
    overflow: auto;
    margin: 0;
    padding: 25px 25px 100px 25px;
    background-color: white;
}

 /* FOOTER */

 #footer {
    background-color: #000;
    position: relative;
    height: 100px;
    margin-top: -100px;
    clear: both;
}
2

Try setting the position property to the value of ‘flow’ instead of ‘relative’:

3

What you have now should work. What exactly isn’t working for you?

The min-height: 100% on the main content should do it and it should still work when you add more content.

Can you post a Codepen that shows the problem?

Pretty simple version (links to more techniques you can try as well)

4

@anon86258595, You must have meant “fixed” instead of “relative”.

1 Like
5

Here is a codepen

as you see there is barely any main content. but the footer is a little bit out of the screen down there. I want it to be sticking at the bottom when there isn’t much content, but staying below the elements when more it added. so it should move down as the page grows

6

If you want to see how your footer responds with more content, you could make a container and sets it’s height to be large enough to see if your footer sticks or moves relative to that content.

7

I don’t think the technique you are using is the best one. I would look at some of the other ones.

It looks like you have to account for the header height.

The number used to subtract is the header height + the bottom border.

#container {
  min-height: calc(100% - 69px);
}

Be aware that if you add box-sizing: border-box to your CSS at some point the calculation will break because the elements are not the same height anymore.

8

I ofcourse tried that, adding and removing content to see how it behaves. the way the code is now it behaves as it should when more content is added. but when there is less content it remains to low on the page, actually half out of it.

9

it’s very likely I am not using all the right techniques :sweat_smile: :sweat_smile: I am still just messing around alot trying to learn.

I’ve used box-sizing: border-box at the HTML tag and box-sizing: inherit at my body tag. You say this can lead to problems later on.
What alternative can I use if I would remove those?

10

I’m just saying the number you need to use in the calc function won’t be the same with box-sizing: border-box set on everything (using the * selector). It will cause elements to have their dimensions calculated differently (MDN: box-sizing).

The nav/header (.menu-bar) also has to be a fixed height, it can’t grow or shrink or the number used to subtract in the calc won’t match.

As I said, the number in the calc function is the height of .menu-bar including its border. So you need to either make sure the content inside it never makes its size change or you have to use a fixed size.

* {
  padding: 0;
  margin: 0;
  /* new size calculations */
  box-sizing: border-box;
}

.menu-bar {
  background-image: linear-gradient(#033747, #012733);
  text-align: center;
  /* fixed height */
  height: 100px;
  border-bottom: 3px solid rgb(255, 128, 10);
}

#container {
  /* subtract the .menu-bar height */
  min-height: calc(100% - 100px);
}

#footer {
  background-color: #000;
  height: 100px;
  margin-top: -100px;
}

That is one reason why this isn’t a good way of doing it as being forced to have the header fixed in height isn’t very flexible.

11

I have used a different method now. for now all seems to be working perfectly fine at last :slight_smile: I have removed the calc for min-height 100% and removed the border-box at the * selector. Ill show you how it looks now.

when there is not alot of content the footers now sticks to the bottom with no scroll bar.

pic1
pic11364×652 43.6 KB

12

and when more content is added the footer sinks down and always keeps the same distance from the main content as shown with the red arrow.

pic2
pic21365×657 54 KB

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.