Sticky footer when using flex-CodePudding

I am trying to make a responsive website with a sticky footer. So far I have been able to achieve what I want with the following HTML and CSS up until the point if anything inside content expands the div, for example if there are several more products, the footer will float over the top of the content div. What I am trying to achieve is for the footer to keep getting pushed down by the content above it.

I've tried using margin 0 auto on the wrapper div which uses flex instead, however it doesn't seem to achieve the results I am looking for.

Can someone help me unblock myself, or advice what I should actually be doing?

Thank you

<head>
<style>
  /* Desktop */
  @media (max-width: 1480px) {
    .content, .header, .footer {
      width: 100%;
      margin: 0 20px;
    }
    .border {
      display: none;
    }
    .product {
      width: 33.33% !important;
    }
  }
  /* Tablet */
  @media (max-width: 768px) {
    .header, .footer {
      margin: 0 auto;
    }
    .product {
      width: 100% !important;
    }
  }
  /* Mobile */
  @media (max-width: 360px) {
  }
  /* Main */
  .push {
    height: 100%;
  }

  .wrapper {
    display: flex;
    justify-content: center;
  }

  .header, .content, .footer {
    width: 1380px;
  }

  .header {
    height: 100px;
    background: green;
  }

  .content {
    background: blue;
    height: 100%;
  }

  .border {
    width: 130px;
    height: 100px;
    float: left;
    background: rebeccapurple;
  }

  .product {
    width: 280px;
    height: 519px;
    float: left;
    background: fuchsia;
  }

  .footer {
    height: 200px;
    margin-top: -200px;
    background: greenyellow;
  }

</style>
</head>
<body>
  <div >

    <div >
      <div >
        <div ></div>
      </div>
    </div>
    
    <div >
      <div >
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
        <div ></div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <div ></div>
    </div>
  </div>
</body>

CodePudding user response：

Updated:
position: sticky; won't do, since you need to have footer always on the bot part of the page no matter the height of the content. So, we get to plan B which is position: fixed; with bottom: 0; and width: 100%;, which makes footer be full-width fixed on bottom but without taking any actual space.

In order to make this work, you need to add a margin-bottom on the content div with the height of your footer. In that way, you "fake" the existence of footer, therefore displaying the whole content of content:

body {
  margin: 0;
  position: relative;
}

header {
  min-height: 60px;
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
  /* Insert the height of your footer element (mine is 60px) */
  margin-bottom: 60px;
}

.product {
  min-width: 200px;
  min-height: 200px;
  background: linear-gradient(45deg, #ccc, #ccc5);
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 60px;
  background: #252525;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

<body>
  <header>
    <h2>This is the header.</h2>
  </header>
  <section >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </section>
  <footer>
    <h2>This is the footer</h2>
    <div >Lorem Ipsum</div>
    <div >Lorem Ipsum</div>
    <div >Lorem Ipsum</div>
  </footer>
</body>

CodePudding user response：

try this approach:

style {
    .flex-body {
        display:flex;
        width:100%;
        height:100%; /* or use 100vh */
    }
    .flex-body .body {
        flex-grow:1;
        position:relative;
    }
    .flex-body .body .container {
        position:absolute;
        width:100%;
        height:100%;
        overflow-y:auto;
    }
    .flex-body .footer {
        /* add footer styles here */
    }
}

and inside your <body> tag:

<div >
    <div >
        <div ><!-- contents of container --></div>
    </div>
    <div ><!-- contents of footer --></div>
</div>

CodePudding user response：

    <head>
<style>
  /* Desktop */
  @media (max-width: 1480px) {
    .main-wrapper, .content, .header, .footer {
      width: 100% !important;
    }
    .border {
      display: none;
    }
    .product {
      width: 33.33% !important;
    }
  }
  /* Tablet */
  @media (max-width: 768px) {
    .product {
      width: 100% !important;
    }
  }
  /* Mobile */
  @media (max-width: 360px) {
  }
  /* Main */
  body {
    position: relative;
  }

  .main-wrapper, .header, .content, .footer {
    width: 1380px;
  }

  .main-wrapper {
    height: 100%;
    margin: 0 auto;
  }

  .footer-wrapper {
    clear: both;
    height: 180px;
    margin-top: -180px;
  }

  .header {
    height: 100px;
    background: green;
  }

  .content {
    background: blue;
  }

  .footer {
    height: 100%;
    margin: 0 auto;
    background: greenyellow;
  }

  .border {
    width: 130px;
    height: 100px;
    float: left;
    background: rebeccapurple;
  }

  .product {
    width: 280px;
    height: 519px;
    float: left;
    background: fuchsia;
  }
</style>
</head>
<body>
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
    <div >
      <div ></div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div ></div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>