I have my footer built as a React component and I am trying to stick it to the bottom of the page. The website that I am building has dynamic content, meaning that some times the content will be 2 lines long and the footer will be in the middle of the page and some times it will be 5 paragraphs long making the footer finally go to the bottom.

I tried sticking the footer to the bottom with:

position: absolute; 
bottom: 0; 

and similar solutions found on the web but none of the solutions helped me achieve my goal. It is important to be noted that I was styling the component with a stylesheet referred inside of the component's file. I also tried to wrap the component in a div and style the div to stick to the bottom when needed but I also failed there. And lastly I tried wrapping the content in a div and pushing away the footer component using margin-bottom.

Footer component code:

import React, { Component } from 'react'
import './BottomBar.css'

class BottomBar extends Component {
    render(){
        return(
            <>
            <footer>
                
            </footer>
            </>
        )
    }
}
export default BottomBar

Footer component style code:

footer{
    padding: 0; 
    width: 100%; 
    background: #28282B; 
    color: white; 
    text-align: center; 
}

.connection-links{
    text-decoration: none; 
    color: white; 
    margin-left: 2vw; 
}

#last-link{
    margin-right: 2.5vw; 
}

I removed all of the code that the previous solutions required to work (mainly because the solutions didn't work) to give you the idea of how the code is structured.

CodePudding user response：

Don't get hung up on the fact that you're using React, or that the content is dynamic; none of that is relevant. CSS is still just CSS and it still follows the same rules regardless of what generated it:

#footer {
  position: absolute; 
  bottom: 0; 
}

<div id="footer">This will be positioned at the bottom of the page.</div>

If that CSS declaration isn't putting the footer where you want it to, it's because some other DOM element that contains the footer has position:relative or position:absolute, so the footer is winding up positioned relative to that parent element instead of relative to the body:

#interference {
  position: relative;
}

#footer {
  position: absolute;
  bottom: 0
}

<div id="interference">
  <div id="footer">This will wind up at the bottom of the #interference element.</div>
</div>

The easiest way to figure out what's causing this is to open up the developer console, inspect the footer element, and then step upwards through its parents until you find the CSS declaration that's interfering with your intended positioning. The fix will either be to remove that position declaration from the parent element, or else move your footer elsewhere in the DOM so it's no longer contained inside another positioned element.

CodePudding user response：

Due to React been very composable, custom layouts are very easy.

Below is a classic example of Fixed Header, Fixed Footer, with scrolling content. It simply uses a flexbox to create that sticky header / footer layout, basically the content just uses flex:1 to take remaining space.

A flexbox will use it's height, unless content is more than height it will grow, so the below snippet keeps the footer at the bottom, unless content takes more space..

function Main({children, footer, header}) {
  return <div style={{
  display: 'flex',
  flexDirection: 'column',
  height: "100vh"}}>
    <div>{header}</div>
    <div style={{flex: 1, padding: '1em'}}>
      {children}
    </div>
    <div>{footer}</div>
  </div>
}

function Header() {
  return <div style={{backgroundColor:'darkGrey', color: 'white'}}>
    This is the Header
  </div>
}

function Footer() {
  return <div style={{backgroundColor:'darkGrey', color: 'white'}}>
    This is at the bottom
  </div>
}

function HideShowText() {
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const i = setInterval(() => {
      setVis(v => !v);
    }, 5000);
    return () => clearInterval(i);
  },[]);
  if (!vis) return <React.Fragment>
<p>Footer stays at bottom, but if more content is added footer gets shifted down.</p>
<b>wait 5 seconds for more content to appear</b>  
  </React.Fragment>;
  return <div>
<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  
  
  <h3>Where does it come from?</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p></div>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Main header={<Header/>} footer={<Footer/>}>
<HideShowText/>
</Main>);

body {
  margin: 0;
  padding: 0;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>