Footer is floating in middle of page despite CSS-CodePudding

I am fairly new to HTMl and CSS. I had my footer stuck to the bottom of the page no problem and then something changed and I cannot figure it out. When I go to a page without a lot of content the footer sits in the middle of the page. On pages with content, it works as it should. I have read countless other posts with the same issue and nothing seems to work. Using "position:fixed" makes the footer stuck to the bottom of the "viewport" not the page itself. Thus when I switch to another page with scrollable content, the footer shows itself behind the page content. I've tried adding "overflow:hidden", "bottom:0;", "left:0" and "right:0" to .main-footer and that doesn't fix it. I don't know what I'm missing. I have already spent a few hours looking up answers and trying to solve this issue.

*, *::before, *::after {
    box-sizing: border-box;
    font-family: 'Abel', sans-serif;
    color: #777;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Styles for navigation menus */
nav ul {
    margin: 0;
}

nav li{
    display: inline-block;   
}

nav a {
    display: inline-flex;
    padding: .5em;
    margin-top: 5px;
    margin-bottom: 5px;
    color: white;
    text-decoration: none;
    transition: 350ms;
}
nav a:hover {
    background-color: rgba(215, 200, 200, .3);
    border-radius: 2px;
}

/*Style for MAIN navigation menu*/
.main-nav {
    text-align: center;
    font-size: 1.1em;
    font-weight: lighter;
    border-bottom: 1px solid rgba(215, 200, 200, .3);
}

.main-nav li {
    padding: 0 5%;
}

.main-header {
    background-image: url('headerfooterimages/headerpicture.jpg');
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    padding-bottom: 25px;
    border-bottom: 1px solid black;
    
}

/* Style for Page Title/Logo */
.titleLogo {
    text-align: center;
    margin: auto;
    font-size: 4em;
    font-family: 'Bebas Neue';
    color: white;
}

.titleLogo-large {
    font-size: 6em;
}

/*Styles for sections of content on page*/
.content-section {
    margin: 1em;
    padding: 2em;
}

.content-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5em;
}

.section-header {
    font-family: Impact;
    font-weight: normal;
    color: rgb(34, 34, 34);
}

/*Styling the footer for each page*/
.main-footer {
    background-color: rgb(45, 45, 45);
    padding: 5px;
    position: relative;
    bottom: 0;
    width: 100vw;
    height: 75px;
    border-top: 1px solid black;
    margin: auto;
}

.footer-text {
    font-size: 25px;
    color: rgba(128, 128, 128);
    display: inline-flex;
}

.footer-text:hover {
    text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.75);
    cursor: crosshair;
    color:rgb(188, 188, 188);
}

.main-footer-container {
    display: flex;
    align-items: center;
}

.main-footer-container ul {
    flex-grow: 1;
    text-align: end;
}
/*Styling the social media links in the footer*/
.footer-nav li {
    list-style: none;
    display: inline-flex;
    transition: 350ms;
}

.footer-nav img {
    border-radius: 5px;
    width: 30px;
    height: 30px;
}

.footer-nav li:hover {
    background-color: rgba(215, 200, 200, .3);
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
}

/*Styling buttons across the whole site*/
.btn {
    background-color: #349aff;
    border: none;
    border-radius: 1em;
    color: white;
    padding: 8px 16px;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    font-size: 8px;
    font-weight: bold;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.btn:hover {
    background-color: #2090ff;
    cursor: pointer;
    box-shadow: none;
}

/*Styling the cart menu option in the main navigation*/
.cart-container{
    display: inline-flex;
    margin: auto;
}

.cart-icon {
    float: left;
    clear: left;
    height: 25px;
}

.cart-text {
    display:inline-block;
    color: white;
    padding: 2px;
    margin-top: 1px;
}

.cart-text:hover {
    text-decoration: underline;
}

/*Styling shop items*/
.shop-item {
    display: block;
    margin: 50px;
}

.shop-item-image {
    display: block;
    margin: 10px;
    height: 200px;
}

.shop-item-title {
    display: block;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 1.1em;
    color: #333;
    margin-bottom: 5px;
}

.shop-item-details {
    display: flex;
    align-items: center;
}

.shop-item-price {
    display: block;
    text-align: center;
    color: #333;
    width: 50%;
}

.shop-item-button {
    display: block;
}

.shop-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/*Styling the image carousel*/
.carousel {
    width: 600px;
    height: 400px;
    position: relative;
    display: flex;
}

.carousel > ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.carousel-container {
    margin: auto;
    align-items: center;
}

/*Styling the buttons on the carousel*/
.carousel-button {
    position: absolute;
    padding: 0 .25rem;
    z-index: 2;
    background: none;
    background-color: rgba(0, 0, 0, .1);
    border: none;
    border-radius: .25rem;
    font-size: 2.5rem;
    top: 50%;
    transform: translateY(-120%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    

}

.carousel-button:hover, .carousel-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
}

.carousel-button:focus {
    outline: 1px solid black;
}

.carousel-button.prev {
    left: 1rem;
}

.carousel-button.next {
    right: 12rem;
}

/*Styling and formatting the next image effect for the image carousel*/
.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    object-fit: fill;
    transition: 400ms opacity ease-in-out;
    transition-delay: 200ms;
    
}

.slide > img {
    display: inline-block;
    width: 70%;
    height: 80%;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}

.slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

<!DOCTYPE html>
<html lang = "enUS">

    <head>

        <title>Modern Style</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta charset="utf-8">
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Abel&family=Bebas Neue" rel="stylesheet">
            <link rel="favicon" href="favicon.ico">
            <link rel="stylesheet" href="stylesheet.css">
            <script src="script.js" defer></script>

    </head>

    <body>

        <header >
                <nav >
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="store.html">STORE</a></li>
                        <li ><a href="cart.html"><img  src="headerfooterimages/cart.png" alt="A shopping cart icon">
                            <div >Shopping Cart</div></a></li>
                    </ul>
                </nav>

            <h1 >Modern Style Website</h1>
        </header>

        <section >
            <h2 >ABOUT</h2>
            <p>
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
                This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. 
            </p>
        </section>

    </body>

    <footer >
        <div >
            <h2 >Modern Style Website</h2>
            <ul >
                <li><a href="https://www.Facebook.com" target="_blank" alt="Link to Facebookcom"><img src="headerfooterimages/Facebook-Logo.png"></a></li>
                <li><a href="https://www.Instagram.com" target="_blank" alt="Link to Instagram.com"><img src="headerfooterimages/Instagram-Logo.png"></a></li>
                <li><a href="https://www.Twitter.com" target="_blank" alt="Link to Twitter.com"><img src="headerfooterimages/Twitter-Logo.png"></a></li>
            </ul>
        </div>
    </footer>

</html>

CodePudding user response：

Seeing as you have declared the body to be 100vh, you can utilize this empty space with margin-top: auto.

On main-footer, remove margin: auto and replace it with margin-top: auto. This way, it will convert the remaining space on the body element into a margin-top-value for the main-footer element.

On another note,

make sure to include the <footer>-element BEFORE your closing </body>-tag, the footer is supposed to be inside the <body>-element.

Also, in your CSS reset, I would consider adding margin: 0; to avoid white bars on your site.

Codepen (because the code snippet is so long): https://codepen.io/sigurdmazanti/pen/ZErJzEK

.main-footer {
    background-color: rgb(45, 45, 45);
    padding: 5px;
    position: relative;
    bottom: 0;
    width: 100vw;
    height: 75px;
    border-top: 1px solid black;
    /*margin: auto;*/
    margin-top: auto;
}

CodePudding user response：

sorry if this might seem obvious, but have you tried using position: absolute and applying those fixes that you mentioned in your post? Or is there another reason you cannot do that?

CodePudding user response：

just use this css code:

i have added multiple values to body and remove margin from footer

*, *::before, *::after {
      box-sizing: border-box;
      font-family: 'Abel', sans-serif;
      color: #777;
    }

    body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      flex-wrap: nowrap;
      align-content: space-between;
      justify-content: space-between;
      align-items: stretch;
    }

    /* Styles for navigation menus */
    nav ul {
      margin: 0;
    }

    nav li{
      display: inline-block;
    }

    nav a {
      display: inline-flex;
      padding: .5em;
      margin-top: 5px;
      margin-bottom: 5px;
      color: white;
      text-decoration: none;
      transition: 350ms;
    }
    nav a:hover {
      background-color: rgba(215, 200, 200, .3);
      border-radius: 2px;
    }

    /*Style for MAIN navigation menu*/
    .main-nav {
      text-align: center;
      font-size: 1.1em;
      font-weight: lighter;
      border-bottom: 1px solid rgba(215, 200, 200, .3);
    }

    .main-nav li {
      padding: 0 5%;
    }

    .main-header {
      background-image: url('headerfooterimages/headerpicture.jpg');
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
      background-blend-mode: multiply;
      padding-bottom: 25px;
      border-bottom: 1px solid black;

    }

    /* Style for Page Title/Logo */
    .titleLogo {
      text-align: center;
      margin: auto;
      font-size: 4em;
      font-family: 'Bebas Neue';
      color: white;
    }

    .titleLogo-large {
      font-size: 6em;
    }

    /*Styles for sections of content on page*/
    .content-section {
      margin: 1em;
      padding: 2em;
    }

    .content-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 1.5em;
    }

    .section-header {
      font-family: Impact;
      font-weight: normal;
      color: rgb(34, 34, 34);
    }

    /*Styling the footer for each page*/
    .main-footer {
      background-color: rgb(45, 45, 45);
      padding: 5px;
      position: relative;
      bottom: 0;
      width: 100vw;
      height: 75px;
      border-top: 1px solid black;
      
    }

    .footer-text {
      font-size: 25px;
      color: rgba(128, 128, 128);
      display: inline-flex;
    }

    .footer-text:hover {
      text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.75);
      cursor: crosshair;
      color:rgb(188, 188, 188);
    }

    .main-footer-container {
      display: flex;
      align-items: center;
    }

    .main-footer-container ul {
      flex-grow: 1;
      text-align: end;
    }
    /*Styling the social media links in the footer*/
    .footer-nav li {
      list-style: none;
      display: inline-flex;
      transition: 350ms;
    }

    .footer-nav img {
      border-radius: 5px;
      width: 30px;
      height: 30px;
    }

    .footer-nav li:hover {
      background-color: rgba(215, 200, 200, .3);
      border-radius: 5px;
      padding-left: 3px;
      padding-right: 3px;
      padding-top: 3px;
    }

    /*Styling buttons across the whole site*/
    .btn {
      background-color: #349aff;
      border: none;
      border-radius: 1em;
      color: white;
      padding: 8px 16px;
      vertical-align: middle;
      text-align: center;
      text-decoration: none;
      font-size: 8px;
      font-weight: bold;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    }

    .btn:hover {
      background-color: #2090ff;
      cursor: pointer;
      box-shadow: none;
    }

    /*Styling the cart menu option in the main navigation*/
    .cart-container{
      display: inline-flex;
      margin: auto;
    }

    .cart-icon {
      float: left;
      clear: left;
      height: 25px;
    }

    .cart-text {
      display:inline-block;
      color: white;
      padding: 2px;
      margin-top: 1px;
    }

    .cart-text:hover {
      text-decoration: underline;
    }

    /*Styling shop items*/
    .shop-item {
      display: block;
      margin: 50px;
    }

    .shop-item-image {
      display: block;
      margin: 10px;
      height: 200px;
    }

    .shop-item-title {
      display: block;
      text-align: center;
      width: 100%;
      font-weight: bold;
      font-size: 1.1em;
      color: #333;
      margin-bottom: 5px;
    }

    .shop-item-details {
      display: flex;
      align-items: center;
    }

    .shop-item-price {
      display: block;
      text-align: center;
      color: #333;
      width: 50%;
    }

    .shop-item-button {
      display: block;
    }

    .shop-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    /*Styling the image carousel*/
    .carousel {
      width: 600px;
      height: 400px;
      position: relative;
      display: flex;
    }

    .carousel > ul {
      margin: 0px;
      padding: 0px;
      list-style: none;
    }

    .carousel-container {
      margin: auto;
      align-items: center;
    }

    /*Styling the buttons on the carousel*/
    .carousel-button {
      position: absolute;
      padding: 0 .25rem;
      z-index: 2;
      background: none;
      background-color: rgba(0, 0, 0, .1);
      border: none;
      border-radius: .25rem;
      font-size: 2.5rem;
      top: 50%;
      transform: translateY(-120%);
      color: rgba(255, 255, 255, .5);
      cursor: pointer;


    }

    .carousel-button:hover, .carousel-button:focus {
      color: white;
      background-color: rgba(0, 0, 0, .2);
    }

    .carousel-button:focus {
      outline: 1px solid black;
    }

    .carousel-button.prev {
      left: 1rem;
    }

    .carousel-button.next {
      right: 12rem;
    }

    /*Styling and formatting the next image effect for the image carousel*/
    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      object-fit: fill;
      transition: 400ms opacity ease-in-out;
      transition-delay: 200ms;

    }

    .slide > img {
      display: inline-block;
      width: 70%;
      height: 80%;
      border-radius: 10px;
      object-fit: cover;
      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
    }

    .slide[data-active] {
      opacity: 1;
      z-index: 1;
      transition-delay: 0ms;
    }