CODEWITHSUNDEEP
htmlcssreactjs
Colin Aulds
Colin Aulds

Reputation: 147

Elements overlapping other in react

In my react project, my footer is overlapping my elements near the bottom of the page.

see live project here: https://surpay-app.herokuapp.com/#/?_k=wo17rb

I have looked at many other questions about this topic as this is a common issue, but I think mine has to do with different react components acting strangely with one another.

I've tried to play with the margins, of the body, as well as the content. I've played with overflow as well as different display styles for the footer. None of this fix the issue. I'd like the footer to stick to the bottom (so i have a position: fixed) but I dont want it overlapping my content. Adding bottom margin to body doesnt help either.

It seems like this shouldn't be an issue anyway, given that the footer is a component that is rendered after the rest of the content. Here is the JSX:

render() {
        return (
          <div>
            <Navigation />
            {this.props.children}
            <Footer />
          </div>
        );
}

Upvotes: 5

Views: 29841

Answers (4)

Alan Alright
Alan Alright

Reputation: 1

It happened to me while using CSS-Flexbox, Try this:

.mydiv{
  display: flex;
  flex-direction: column;
}

for example: having two React Components one after the other, Let's say we want to render the following:

return(
  <div className="mydiv">
    <Comp1 />
    <Comp2 />
  </div>
)

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

On body remove height and add padding-bottom: 70px.
On #app change height: 100% to min-height: 100vh
On .homePage change height: 400px to min-height: 400px
On .Footer remove height: 70px

Upvotes: 0

Martin Dawson
Martin Dawson

Reputation: 7656

Nothing to do with react. It's your css that's wrong.

Add all the <footer /> styles to the <div class="Footer" /> instead.

.Footer {
    height: 70px;
    position: fixed;
    bottom: 0;
    background: #201D1E;
    padding: 10px 0;
    width: 100%;
}

.footer {
    padding: inherit;
}

Having the wrapped in a div called Footer just seems like bad html though. Doesn't make sense.

Upvotes: 0

Toby
Toby

Reputation: 13385

You need to add a margin to the bottom of body to account for the space taken up by the fixed footer:

body {
  margin-bottom: 80px; // footer height plus 10px
}

Upvotes: 1

Related Questions