CODEWITHSUNDEEP
cssreactjsstyled-components
nathannewyen
nathannewyen

Reputation: 253

I tried to create a footer stay bottom but it's not working

Here is how my page look like:

enter image description here

I tried to add position: relative to my PageContainer but the footer still right there. How can I fix it ?

Here is my code in App.js:

const PageContainer = styled.div`
  position: relative;
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <PageContainer>
        <TopNav />
        <SideNav />
        <RouterStyle>
          <Router>
            <ContactForm path="/contact" />
            <ShopAllProducts path="/" />
            <NewArrival path="/shop/new-arrival" />
            <Product path="/product/:title_url" />
          </Router>
        </RouterStyle>
      </PageContainer>
      <Footer />
    </>
  );
}

here is my Footer.js:

const FooterWrapper = styled.div`
  padding: 10px 0;
  font-family: ${fonts.Gotham};
  font-size: ${fontSizes.sm};
  font-weight: 500;
  position: absolute;
  bottom: 0;
  background-color: red;
  width: 100%;
`;

const FooterContainer = styled.div`
  justify-content: space-between;
  display: flex;
`;


const Footer = (props) => {
  return (
    <FooterWrapper>
      <FooterContainer>
        <LinkFooter to="/">Privacy & Policy</LinkFooter>
        <Beuter2020>© 2020 THE BEUTER</Beuter2020>
        <LinkFooter to="/">Facebook</LinkFooter>
      </FooterContainer>
    </FooterWrapper>
  );
};

p/s: I am using styled-components

After took out position: absolute, bottom:0 enter image description here

Here is my project Github: https://github.com/nathannewyen/the-beuter

Upvotes: 0

Views: 236

Answers (1)

Balaji
Balaji

Reputation: 10887

just change position absolute to fixed(absolute is wrong because of when u scroll the page absolute footer also scroll)

make sure footer is in root element, otherwise parent style applied to footer like padding in this situation you should mention css clearly

left:0;
right:0;
bottom:0;

becuase of padding

you did right but the actual problem is position 

.footer{
padding: 10px 0;
  font-weight: 500;
left:0;
right:0;
  bottom: 0;
  position: fixed;
  background-color: red;
  width: 100%;
  
  }
<div>
dffd
df
f
df
fd
fd
f
df

df
df
d
f
df
df
d
f
df
df
d
fd
f
df
d
fd
f
f
df
d
f
df
d
fd
ff
fd
f
df
df
fd
f
f
dfd
fd
f
d
fdf
d
f
f
df
df
d
f
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
df
fd
f
dfd
<br>
f
df
d
f
dfd
f
df
df
d
f
df
d
f
dffaffsdfsfdffdfdfdfdf
</div>

<div class="footer">
something
</div>

without sticky footer(main element occupied height:100vh so your footer automatically goes down after 100vh )

.main{
min-height:100vh;
width:100%;
}
.footer{

background:red;
height:20px;
}
<div class="main">
main


</div>


<div class="footer">footer</div>

Upvotes: 1

Related Questions