How to fix the footer to the bottom?

HTML & CSS
1

Screenshot from 2024-06-04 13-46-16
Screenshot from 2024-06-04 13-46-161910×995 209 KB

How can I move the footer to the bottom of the page?
My HTML code is

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <header id="main-header">
        <div class="container">
            <h1>My Website</h1>
        </div>
    </header>
    
    <nav id="navbar">
        <div class="container">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

    <section id="showcase">
        <div class="container">
            <h1>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. A vel tenetur natus, reiciendis impedit sint assumenda incidunt dignissimos. Aliquid at, vitae molestiae quia quod saepe ipsam corporis eius? Et, quae.
            </h1>
        </div>
    </section>    
    <div>
        <section id="main">
            <h1>Welcome</h1>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate sit a soluta cumque non aspernatur optio, eius itaque, reprehenderit maiores fugit error, nesciunt impedit ullam. Asperiores enim nostrum magni numquam!
            </p>
        </section>
    
        <aside id="sidebar">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate sit a soluta cumque non aspernatur optio, eius itaque, reprehenderit maiores fugit error,
            </p>
        </aside>
    </div>
    <footer id="main-footer">
        <p>Copyright &copy;2018  My Website</p>
    </footer>
</body>
</html>

My CSS code is

  body{
    background-color: #f4f4f4;
    color: #555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin:0;
}

.container{
    width:80%;
    margin: auto;
    overflow: hidden;
}

#main-header{
    background-color: coral;
    color: #fff;
}

#navbar{
    background-color: #333;
    color: #fff;
}

#navbar ul{
    padding:0;
    list-style: none;
}

#navbar li{
    display:inline;
}

#navbar a{
    color:#fff;
    text-decoration: none;
    font-size: 18x;
    padding-right: 15px;
}

#showcase{
    
    background-image:url('../images/bgimage.jpeg');
    background-position: center right;
    min-height: 300px;
    margin-bottom: 30px;
    text-align: center;
}

#showcase h1{
    color:#fff;
    font-size: 50px;
    line-height: 1.6em;
    padding-top: 30px;
}

#main{
    float:left;
    width:70%;
    padding: 0 30px;
    box-sizing:border-box;
}

#sidebar{
    float:right;
    width: 30%;
    background: #333;
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
}

#main-footer{
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}
2
  1. Using Flexbox:
    Try wrapping your main content (#main and #sidebar ) and the footer (#main-footer ) in a flex container and setting the justify-content property to space-between . This will distribute the available space between the elements and push the footer to the bottom.

CSS

body {
  /* ... your existing styles */
}

.container {
  /* ... your existing styles */
}

/* Create a flex container for main content and footer */
.content-wrapper {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  min-height: 100vh; /* Set minimum height to viewport height */
}

#main {
  /* ... your existing styles */
}

#sidebar {
  /* ... your existing styles */
}

#main-footer {
  /* ... your existing styles */
  /* Remove margin-top as the flexbox will handle positioning */
  margin-top: 0;
}
  1. Using CSS Grid:
    Similar to flexbox, you can use CSS Grid to achieve the same result.

CSS

body {
  /* ... your existing styles */
}

.container {
  /* ... your existing styles */
}

/* Create a grid container for main content and footer */
.content-wrapper {
  display: grid;
  grid-template-rows: 1fr auto; /* Allocate remaining space to footer */
  min-height: 100vh; /* Set minimum height to viewport height */
}

#main {
  /* ... your existing styles */
}

#sidebar {
  /* ... your existing styles */
}

#main-footer {
  /* ... your existing styles */
  grid-row: 2; /* Place footer in the second grid row */
}

Both methods achieve the same result of placing the footer at the bottom of the page. Flexbox is generally considered simpler for this specific task, but CSS Grid offers more layout flexibility for complex designs.

Choose what suits you best.

1 Like
3

Thanks so much!

4

You could also do it without adding a wrapper. You would use the body as the wrapper and then just add a class to the columns section to stretch it down to the footer.

e.g.

body{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
}
.columns{
  flex:1 0 0;
}

Then add a class to that empty div (class="columns") and make it work for a living:)

<div class="columns">
  <section id="main">

Its not better (or worse) than the other method you’ve been shown but doesn’t require any other changes to the html apart from adding the class to an existing element.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.