How to keep footer at bottom of the page? – HTML-CSS

by


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="https://forum.freecodecamp.org/t/how-to-keep-footer-at-bottom-of-the-page/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;
}



Source link

Leave a Comment