0

I'm trying to keep my footer at the bottom of my web page. Just having it at the bottom of the page works fine, but when I add content via a button, the body exapands but the footer stays on it's current position - meaning the body goes over the footer.

Here's my footer CSS:

.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
}

The website is in React so here's a layout page that I use to structure the page

        <div>
            <Header>
            </Header>
            <Body className="body">
                {this.props.children}
            </Body>
            <Footer className="footer"/>
        </div>

Any ideas on how to proceed?

In response to this being a duplicate question: This question is different to other questions as this one is about a footer that is already at the bottom of the page, but doesnt stay that way when new content is added dynamically.

smuvv
  • 941
  • 1
  • 8
  • 20
  • 1
    why are you using `position: absolute`? – Davin Tryon Dec 05 '17 at 16:00
  • @DavinTryon Not sure to be honest, but every answer I've found online uses it. Changing it to `relative` does make stay under the body, but it isn't at the bottom of the page anymore, but rather right below the body. – smuvv Dec 05 '17 at 16:06
  • could you create a fiddle showing the current problem? – Sivadass N Dec 05 '17 at 16:24

0 Answers0