Keep the footer in the bottom

Question

The footer in my code stays in the middle of the page and I want that it moves dynamically to the bottom of the page .and when I will add rectangles the footer will move more bottom. HTML:

<div id="wrapper">

<header>
    <a href="index.html" id="logo"></a>
</header>
<nav class="index_nav">
    <ul>
        <li ><a href="index.html">Layout 1</a></li>
        <li><a href="layout2.html">Layout 2</a></li>
        <li class="selected"><a href="Layout3.html">Layout 3</a></li>
    </ul>
</nav>
    <main class="Rectangles">
    </main>
<footer class="footer3">
</footer>
</div>

CSS:

.Rectangles {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    position: relative;
}

.Rectangles>section {
    cursor: pointer;
    height: 350px;
    width: 333px;
}

.footer3 {
    position: relative;
    height: 48px;
    width: 100%;
    background-color: #d6d6d6;
}

Does this answer your question? [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — Dilshan, Apr 21 '21 at 12:25

score 0 · Answer 1 · answered Apr 21 '21 at 12:35

0

Change your css of footer to below one:

.footer3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
  background-color: #d6d6d6;
}

answered Apr 21 '21 at 12:35

Pratik Dagwale

1

score 0 · Answer 2 · answered Apr 21 '21 at 12:37

0

just remove your position: relative;

and change to position: fixed; or position: absolute;

and refresh

answered Apr 21 '21 at 12:37

TB Maulana Aghni

1
1
1

Keep the footer in the bottom

2 Answers2