CODEWITHSUNDEEP
htmlcssresponsivesticky-footer
Welly123456
Welly123456

Reputation: 13

Sticky footer when using flex

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

/* 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;
}
<body>
  <div class="push">

    <div class="wrapper">
      <div class="header">
        <div class="border"></div>
      </div>
    </div>

    <div class="wrapper">
      <div class="content">
        <div class="border"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="product"></div>
        <div class="border"></div>
      </div>
    </div>
  </div>

  <div class="wrapper">
    <div class="footer">
      <div class="border"></div>
    </div>
  </div>
</body>

Upvotes: 0

Views: 2713

Answers (3)

Welly123456
Welly123456

Reputation: 13

    <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 class="main-wrapper">
    <div class="header">
      <div class="border"></div>
      <div class="border"></div>
    </div>
    <div class="content">
      <div class="border"></div>
      <div class="product">
      </div>
      <div class="product">
      </div>
      <div class="product">
      </div>
      <div class="product">
      </div>
      <div class="border"></div>
    </div>
  </div>
  <div class="footer-wrapper">
    <div class="footer">
      <div class="border"></div>
      <div class="border"></div>
    </div>
  </div>
</body>

Upvotes: 0

George Chond
George Chond

Reputation: 997

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 class="content">
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
    <div class="product"></div>
  </section>
  <footer>
    <h2>This is the footer</h2>
    <div class="info">Lorem Ipsum</div>
    <div class="info">Lorem Ipsum</div>
    <div class="info">Lorem Ipsum</div>
  </footer>
</body>

Upvotes: 3

Ph Abd
Ph Abd

Reputation: 77

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 class="flex-body">
    <div class="body">
        <div class="container"><!-- contents of container --></div>
    </div>
    <div class="footer"><!-- contents of footer --></div>
</div>

Upvotes: 1

Related Questions