css Question posted in
Some basic documentation can be found here.

How can I get a footer to stay at the bottom of the page (not screen) without using flex in css

I can’t get the footer to stay at the bottom of the page without using flex, and flex causes problems with my content of the page so I need a different solution

You can see my CSS here: https://github.com/Lncvrt/website/blob/main/app/styles.css

I tried solving it using flex (this causes weird bugs on my page) and a few other things but they either are fixed height on the page (like set to the bottom but not actually adjustable for when there is more content on the page, if that makes sense)

Tags:

2

Answers


  1. 0

    I’d say use 2 divs, one for the content and one for the footer. For the content div, give it the properties min-height: 100%, box-sizing: border-box, padding-bottom: [footer height] so it takes up the full height of the page – the footers height

    Then, for the footer, give it position: absolute, bottom: 0 on a separate div, with a set pixel height the same as the bottom padding for the content.

    Hope this helps 😀

    Login or Signup to reply.
  2. 0

    You can fix the footer by taking 2 divs. 1 will contain all areas like header, banner etc and 2nd will contain footer. You have to add 1 extra blank div with main content area having height will be same of the footer height. Try this code

    CSS code:

    body, html{
    height: 100%;
}

.outer-container{
    margin: 0px auto -200px;
}

.push{
    height: 200px;
}

    HTML Structure:

    <div class="outer-container">
    <header></header>
    other content section divs
    <div class="push"></div>
</div>

<footer>footer content</footer>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search