the footer is not displaying correctly on the page

Question

I have a problem with my footer. I made one and is not staying on the bottom of the page. You can see below that is staying somewhere on the middle of the page.. The footer must stay at the bottom of the page and the content "test" as in this example must stay on top.

I've tried using and same thing happend.

How can I fix this problem?

@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.wrapper {
    position: relative;
    width: auto;
    height: 100vh;
    padding: 15px;
    font-size: 1.1em;
    top: 0;
}

.content-wrapper {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

.main-footer {
    position: relative;
    padding: 10px 10px 0px 10px;
    bottom: 0;
    width: 100%;
    background-color: red;
}

.copyright {
    float: right;
}

<body>

<div class="wrapper">
    <div class="content-wrapper">
        test<br>
        test<br>
        test<br>test<br>test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>test<br>
        
        
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
    </div>
</div>

<div class="main-footer">
      <div class="copyright">
          <a href="{{ url('dmca') }}">DMCA</a> | <a href="{{ url('contact') }}">Contact</a>
      </div>
      &copy; netview.com 2019-2021 - all rights reserved.
</div>

</body>

If you're giving your `.wrapper` a specific height then you need to do something about the `overflow` — Alon Eitan, Jul 12 '21 at 11:14

score 1 · Accepted Answer · answered Jul 12 '21 at 11:16

change the height of the .wrapper class

@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.wrapper {
    position: relative;
    width: auto;
    height: 100%; 
    padding: 15px;
    font-size: 1.1em;
    top: 0;
}

.content-wrapper {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

.main-footer {
    position: relative;
    padding: 10px 10px 0px 10px;
    bottom: 0;
    width: 100%;
    background-color: red;
}

.copyright {
    float: right;
}

<body>

<div class="wrapper">
    <div class="content-wrapper">
        test<br>
        test<br>
        test<br>test<br>test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>test<br>
        
        
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
    </div>
</div>

<div class="main-footer">
      <div class="copyright">
          <a href="{{ url('dmca') }}">DMCA</a> | <a href="{{ url('contact') }}">Contact</a>
      </div>
      &copy; netview.com 2019-2021 - all rights reserved.
</div>

</body>

Well, if I go on the snippet code on 'full page' is not really at the bottom, is still a much space between the footer and the bottom of the page — Freezy, Jul 12 '21 at 11:19
in that case, You have to give its height for ```wrapper``` class and add ```overflow: scroll``` — TinsG, Jul 12 '21 at 11:22

the footer is not displaying correctly on the page

1 Answers1