How do I put my footer in the bottom of the page?

Question

I'm trying to recreate the flex layout exercise from The Odin Project.

Here is what my page looks like but I can't figure out how to make the footer stick at the bottom of the page so that the main container can occupy most of the screen. For the exercise, I can only use display: flex and its properties. What is wrong with my code?

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,900;1,900&display=swap');

body {
    font-family: 'Alegreya Sans', sans-serif;
    background-color: #FEF9F8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    
}

header {
    background-color: #ED9275;
    height: 70px;
    display: flex;
    font-size: 32px;
    align-items: center;
    padding: 16px;
}

.main-container {
    display: flex;
    flex: 1;
}

.sidebar {
    background-color: #2A6877;
    flex-shrink: 0;
    width: 300px;
    padding: 16px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: white;
    font-weight: 400;
}

li {
    margin-bottom: 5px;
    font-size: 20px;
}

.card-container {
    display: flex;
    margin: 30px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.card {
    border: 1px solid black;
    width: 200px;
    padding: 10px;
    text-align: center;
    margin: 16px;
}

footer {
    background-color: #ED9275;
    color: black;
    font-weight: 300;
    height: 72px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>Box Zilla</h1>
    </header>

<main>
    <div class="main-container">
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Packages</a>
                </li>
                <li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </div>
        
        <div class="card-container">
            <div class="card">
               <h2>Heading 1</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
            </div>
            <div class="card">
                <h2>Heading 2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 3</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 4</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 5</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 6</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
        </div>
    </div>
</div>


        <footer>
            <p>Property of Box Zilla Corporated</p>
            
        </footer>

    
</main>
</body>
</html>

Look into CSS positions - this will help you decipher what you need — Can O' Spam, May 03 '22 at 13:15
Answers on this link may help you.https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b — Mehran Khan, May 03 '22 at 13:15

Kameron · Answer 1 · 2022-05-04T14:20:53.807

The best way would be to add position: relative; with bottom: 0; on your footer. However, when your content does not exceed the length of the page (y-axis scroll) the footer will be directly under the content and not at the very bottom of the page.

In the event that there is no scroll and you still want the footer at the bottom I would then use either position fixed or absolute and add width: 100%; on the footer.

I added a static height on your main-container to demonstrate how relative works.

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,900;1,900&display=swap');
body {
  font-family: 'Alegreya Sans', sans-serif;
  background-color: #FEF9F8;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  background-color: #ED9275;
  height: 70px;
  display: flex;
  font-size: 32px;
  align-items: center;
  padding: 16px;
}

.main-container {
  display: flex;
  flex: 1;
  height: 1074px;
}

.sidebar {
  background-color: #2A6877;
  flex-shrink: 0;
  width: 300px;
  padding: 16px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
  font-weight: 400;
}

li {
  margin-bottom: 5px;
  font-size: 20px;
}

.card-container {
  display: flex;
  margin: 30px;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
}

.card {
  border: 1px solid black;
  width: 200px;
  padding: 10px;
  text-align: center;
  margin: 16px;
}

footer {
  background-color: #ED9275;
  color: black;
  font-weight: 300;
  height: 72px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <h1>Box Zilla</h1>
  </header>
  <main>
    <div class="main-container">
      <div class="sidebar">
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Packages</a>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
        </ul>
      </div>
      <div class="card-container">
        <div class="card">
          <h2>Heading 1</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div class="card">
          <h2>Heading 2</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div class="card">
          <h2>Heading 3</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div class="card">
          <h2>Heading 4</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div class="card">
          <h2>Heading 5</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div class="card">
          <h2>Heading 6</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <p>Property of Box Zilla Corporated</p>
  </footer>
</body>
</html>

score 1 · Answer 2 · edited May 04 '22 at 04:51

Your webpage has 3 main elements

Header
Content
Footer

I would suggest you to add justify-content:space-between; to the body tag as you have to use flex properties

Alternatively, you can use a media query to keep footer at bottom using position. After that, your content will fill the page's empty space and your footer will be automatically at the bottom

Changes Made

Moved footer outside main tag (idk why)

Tips

Use padding in percentage (ex: Padding:2%;) for responsiveness

Have a nice day ^_^

@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,900;1,900&display=swap');
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Alegreya Sans', sans-serif;
    background-color: #FEF9F8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;

    /* Changes Made */
    justify-content: space-between;

    
}

header {
    background-color: #ED9275;
    height: 70px;
    display: flex;
    font-size: 32px;
    align-items: center;
    padding: 16px;
}

.main-container {
    display: flex;
    flex: 1;
}

.sidebar {
    background-color: #2A6877;
    flex-shrink: 0;
    width: 300px;
    padding: 16px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: white;
    font-weight: 400;
}

li {
    margin-bottom: 5px;
    font-size: 20px;
}

.card-container {
    display: flex;
    margin: 30px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.card {
    border: 1px solid black;
    width: 200px;
    padding: 10px;
    text-align: center;
    margin: 16px;
}

footer {
    background-color: #ED9275;
    color: black;
    font-weight: 300;
    height: 72px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Box Zilla</h1>
    </header>

<main>
    <div class="main-container">
        <div class="sidebar">
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Packages</a>
                </li>
                <li>
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </div>
        
        <div class="card-container">
            <div class="card">
               <h2>Heading 1</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
            </div>
            <div class="card">
                <h2>Heading 2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 3</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 4</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 5</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div class="card">
                <h2>Heading 6</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
        </div>
    </div>
</div>


      

    
</main>

<footer>
    <p>Property of Box Zilla Corporated</p>
    
</footer>
</body>
</html>

How do I put my footer in the bottom of the page?

2 Answers2