htmlcssfooter

How to make container height expand to fit all contents

My <main> container's height is way less than the content inside it so it stops like halfway down the page, and the rest overflows So my footer sits like halfway up the page and I don't understand why.

I want the <main> container's height to expand to contain all of its content so the footer stays below it and doesn't overlap, no scrollbars or hidden content.

this on all browsers

main+footer

html,
body {
  margin: 0;
  padding: 0px;
}

a {
  text-decoration: none;
}

body {
  color: #222;
  font-size: 18px;
  background-color: rgb(200, 200, 200);
  font-family: "Lato", sans-serif;
  background-color: white;
  display: flex;
  flex-direction: column;
}

#home-page-header {
  background-color: #ccc;
}

main {}

footer {
  background-color: white;
  padding-right: 4%;
  padding-left: 4%;
  padding-bottom: 100px;
  bottom: 0;
  margin-top: auto;
}

footer a {
  font-weight: bold;
  color: #222;
}

footer a:hover {
  opacity: 0.75;
}

footer i {
  font-size: 25px;
}

footer #logo-f {
  margin-bottom: 20px;
}

.footer-top .row {
  gap: 20px;
}

.footer-top .row .col {
  margin-bottom: 10px;
}

footer hr {
  border-style: dotted none none;
  border-width: 3px;
  border-color: #8f8f8f;
  margin-top: 40px;
  margin-bottom: 40px;
}

.footer-bottom {
  display: flex;
  font-weight: normal;
  font-size: 16px;
  justify-content: space-between;
}

.footer-bottom li {
  display: inline-block;
  list-style-type: none;
  margin-right: 25px;
}


/*top of page*/

.top-txt {
  margin: 0;
  padding-bottom: 4%;
}

.top-txt h2 {
  margin: 0;
  text-align: center;
  font-size: 2vw;
}


/*hero image*/

#hero-section {
  background-color: #ccc;
  padding-bottom: 4%;
}

.page-title {
  margin: 0;
  text-align: center;
  font-size: 8vw;
  padding-top: 5%;
  padding-bottom: 1%
}

#hero-section img {
  width: 75%;
  display: block;
  margin: auto;
  border-radius: 10px;
}


/*main blocks*/

.main-content {
  margin-left: 3%;
  margin-right: 3%;
  padding-top: 5%;
  padding-bottom: 5%;
}

.main-grid {
  display: grid;
  align-items: center;
  grid-gap: 5%;
}

#home-grid {
  grid-template-areas: "bsb" "cta1" "cate" "ib1" "cta2" "ib2" "rvb" "cta3";
}


/*bs*/

#bs-block {
  grid-area: bsb;
}

#bs-block h1 {
  text-align: center;
  font-size: 4vw;
}

#bestseller-imgs img {
  width: 96%;
  border-radius: 10px;
  display: block;
  align-items: center;
  margin: auto;
  transition: all 0.2s ease;
}

#bestseller-imgs p {
  padding-left: 5%;
  color: #222;
  font-size: 25px;
  font-weight: bold;
  text-decoration: underline 1px;
  text-underline-offset: 10px;
}

#bestseller-imgs img:hover {
  filter: brightness(70%)
}

#bestseller-imgs p:hover {
  text-decoration: underline 2px;
}


/*categories*/

#cate-block {
  grid-area: cate
}

#cate-block h1 {
  font-size: 4vw;
}

.cate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
}

.cate-img {
  width: 100%;
  border-radius: 10px;
  transition: all 500ms ease;
}

.category {
  position: relative;
  padding-bottom: 20px;
}

.cate-img-desc {
  position: absolute;
  bottom: 8%;
  left: 6%;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  font-size: 2vw;
  font-weight: bold;
  transition: all 500ms ease;
}

.category:hover .cate-img-desc {
  visibility: visible;
  opacity: 1;
}

.cate-img:hover {
  filter: brightness(70%)
}


/*cta blocks*/

#cta-block-1 {
  grid-area: cta1
}

#cta-block-2 {
  grid-area: cta2;
}

#cta-block-3 {
  grid-area: cta3;
}

.cta-block {
  font-size: 2vw;
  text-align: center;
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}


/*info blocks*/

.info-row {
  padding-top: 5%;
  padding-bottom: 5%;
  gap: 3%;
}

.info-row img {
  width: 100%;
  border-radius: 10px;
  display: block;
  margin: auto;
}

.info-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5vw;
  margin: auto;
}

#info-block-1 {
  grid-area: ib1;
}

#info-block-2 {
  grid-area: ib2;
}


/*review block*/

#review-block {
  grid-area: rvb;
}

#review-block .row {
  gap: 20px;
}

#review-text {
  margin: auto;
}

#rvw-img img {
  width: 80%;
  border-radius: 10px;
  display: block;
  margin: auto;
  margin-bottom: 50px;
}

#rvw-txt {
  display: flex;
  border: 1px solid #222;
  text-align: center;
  align-items: center;
  margin-top: 50px;
}

#rvw-txt h2 {
  padding-left: 10%;
  padding-right: 10%;
  font-size: 3vw;
}


/*default*/

.row {
  display: flex;
}

.row-rev {
  display: flex;
  flex-direction: row-reverse;
}

.col {
  flex: 1;
}

.cta-btn {
  color: #222;
  border: 1px #222 solid;
  border-radius: 7px;
  background-color: white;
  padding: 0.6em 1.2em 0.6em 1.2em;
  font-size: 2vw;
  transition: all 300ms ease;
  cursor: pointer;
}

.cta-btn:hover {
  background-color: #222;
  color: white;
}

.border-block {
  /*a block has a top and bottom line border*/
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}
<main>
  <div id="hero-section">
    <div class="top-txt">
      <h1 class="page-title">STORE CO.</h1>
      <h2>Shop for electronics.</h2>
    </div>
    <a href="">
      <img src="header-img.jpg" alt="Main Image">
    </a>
  </div>

  <div class="main-content">
    <!--main content-->

    <div class="main-grid" id="home-grid">
      <!--main grid-->
      <div class="main-block" id="bs-block">
        <h1>BESTSELLERS</h1>
        <div class="row" id="bestseller-imgs">
          <div class="col">
            <a href=""><img src="bestseller-1.jpg" alt="Product 1">
              <p>Product 1</p>
            </a>
          </div>
          <div class="col">
            <a href=""><img src="bestseller-2.jpg" alt="Product 2">
              <p>Product 2</p>
            </a>
          </div>
          <div class="col">
            <a href=""><img src="bestseller-3.jpg" alt="Product 3">
              <p>Product 3</p>
            </a>
          </div>
        </div>
      </div>

      <div class="main-block cta-block" id="cta-block-1">
        <h2>View our entire catalogue</h2>
        <a href="" class="cta-btn">Products</a>
      </div>

      <div class="main-block" id="cate-block">
        <h1>CATEGORIES</h1>
        <ul class="cate-grid">
          <li>
            <div class="category">
              <a href=""><img class="cate-img" src="music-equipment.jpg" alt="Category Image 1">
                <p class="cate-img-desc">Audio</p>
              </a>
            </div>
          </li>
          <li>
            <div class="category">
              <a href=""><img class="cate-img" src="mobile-phone.jpg" alt="Category Image 2">
                <p class="cate-img-desc">Mobile</p>
              </a>
            </div>
          </li>
          <li>
            <div class="category">
              <a href=""><img class="cate-img" src="computer.jpg" alt="Category Image 3">
                <p class="cate-img-desc">Computers</p>
              </a>
            </div>
          </li>
          <li>
            <div class="category">
              <a href=""><img class="cate-img" src="home-tv.jpg" alt="Category Image 4">
                <p class="cate-img-desc">Home</p>
              </a>
            </div>
          </li>
          <li>
            <div class="category">
              <a href=""><img class="cate-img" src="equipment.jpg" alt="Category Image 5">
                <p class="cate-img-desc">Equipment</p>
              </a>
            </div>
          </li>
          <li>
            <div class="category">
              <a href=""><img class="cate-img" src="camera.jpg" alt="Category Image 6">
                <p class="cate-img-desc">Photography</p>
              </a>
            </div>
          </li>
        </ul>
      </div>

      <div class="main-block info-block border-block" id="info-block-1">
        <div class="row info-row">
          <div class="col">
            <img src="cta1.jpg" alt="Broken Electronics">
          </div>
          <div class="col info-text">
            <h1>Need repairs?</h1>
            <h2>You can contact our support team with any questions.</h2>
            <a href="" class="cta-btn">Support</a>
          </div>
        </div>
      </div>

      <div class="main-block cta-block" id="cta-block-2">
        <h2>Learn more about us</h2>
        <a href="about-us.php" class="cta-btn">About Us</a>
      </div>

      <div class="main-block info-block border-block" id="info-block-2">
        <div class="row-rev info-row">
          <div class="col">
            <img src="cta2.jpg" alt="New Product">
          </div>
          <div class="col info-text">
            <h1>On a budget?</h1>
            <h2>See our discounted items.</h2>
            <a href="" class="cta-btn">Sales</a>
          </div>
        </div>
      </div>

      <div class="main-block" id="review-block">
        <div class="row">
          <div class="col info-text" id="review-text">
            <h1>Over 5,000 reviews</h1>
            <h2>Read thousands of real reviews.</h2>
            <a href="" class="cta-btn">Explore</a>
          </div>
          <div class="col" id="rvw-img">
            <img src="review.jpg" alt="Review Image">
          </div>
          <div class="col" id="rvw-txt">
            <h2>"The quality was so amazing, I was shocked at the price."</h2>
          </div>
        </div>
      </div>

      <div class="main-block cta-block" id="cta-block-3">
        <h2>Browse hundreds of products.</h2>
        <p>Click below to start.</p>
        <a href="" class="cta-btn">Catalogue</a>
      </div>
    </div>
    <!--main grid end-->
  </div>
  <!--main content end-->
</main>

<footer>
  <div class="footer-top">
    <div id="logo-f"><i class="fa-solid fa-circle-notch"></i></div>

    <div class="row">
      <div class="col"><a href="">My Account</a></div>
      <div class="col"><a href="">Online Ordering</a></div>
      <div class="col"><a href="">Find Stores</a></div>
      <div class="col"><a href="">FAQs</a></div>
    </div>
    <div class="row">
      <div class="col"><a href="">Order Status</a></div>
      <div class="col"><a href="">Shipping</a></div>
      <div class="col"><a href="">Customer Service</a></div>
      <div class="col"><a href="about-us.php">About Us</a></div>
    </div>
    <div class="row">
      <div class="col"><a href="">Membership</a></div>
      <div class="col"><a href="">Billing</a></div>
      <div class="col"></div>
      <div class="col"><a href="">Contact Us</a></div>
    </div>
  </div>
  <hr>
  <div class="footer-bottom">
    <ul class="footer-bottom-left">
      <li><a href="">Terms & Conditions</a></li>
      <li><a href="">Privacy Policy</a></li>
      <li><a href="">Copyright</a></li>
    </ul>
    <ul class="footer-bottom-right">
      <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
      <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
      <li><a href=""><i class="fa-brands fa-youtube"></i></a></li>
      <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
      <li><a href=""><i class="fa-brands fa-tiktok"></i></a></li>
    </ul>
  </div>
</footer>

Solution

  • If you want the vertical space on your page to be distributed automatically, use flex-box instead of grid.

    Grid doesn't automatically stretch to viewport height.

    Changing the display to flex on your .main-grid class fixes the problem.

    .main-grid {
    display: flex;
    flex-direction: column;
}

    If you wanted to do this using grid, you'd have to explicitly define how high your page will be and that would not be the best practice in this case.

    Hope that helps.