Home > Software engineering >  How do I put my footer in the bottom of the page?
How do I put my footer in the bottom of the page?

Time：05-04

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 >
        <div >
            <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 >
            <div >
               <h2>Heading 1</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
            </div>
            <div >
                <h2>Heading 2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <h2>Heading 3</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <h2>Heading 4</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <h2>Heading 5</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <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>

CodePudding user response：

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: 1200px;
}

.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 >
      <div >
        <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 >
        <div >
          <h2>Heading 1</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div >
          <h2>Heading 2</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div >
          <h2>Heading 3</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div >
          <h2>Heading 4</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div >
          <h2>Heading 5</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
        </div>
        <div >
          <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>

CodePudding user response：

Your webpage has 3 main elements 1. Header 2. Content 3. Footer So , I would suggest you to add justify-content:space-between; to body tag as you have to use flex properties

Alternatively , You can use media querry to keep footer at bottom using position, After that your content will fulfil 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 >
        <div >
            <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 >
            <div >
               <h2>Heading 1</h2>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
            </div>
            <div >
                <h2>Heading 2</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <h2>Heading 3</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <h2>Heading 4</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <h2>Heading 5</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
             </div>
             <div >
                <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>

Page link：https//www.codepudding.com/Softwareengineering/394512.html

Prev:How to put gallery on left and table on right in same line?
Next:Need help - Divide by 0 error in window equation?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding