How to set the footer to the bottom of the screen in React.js?

Viewed 17

I'm trying to fix the footer at the bottom of the screen with React.js It will be put away by the edge. How can I fix it?

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

enter image description here

App.css

.footer_bottom {
  position: absolute;
  bottom: 0;
}

.footer {
  display:flex;
  justify-content: space-between;
  background: #1E3E75;
  padding: 30px;
}

.ic_bottom_home {
  margin-left: 30px;
  width: 30px;
  height: 30px; 
}

.ic_bottom_meter {
  width: 30px;
  height: 30px; 
}

.ic_group {
  margin-right: 30px;
  width: 30px;
  height: 30px; 
}

LightDetailCondo.js

  return (
    <div>
      <Header />
      <p className="condo_top">Condo</p>
      <div className="container">
      .
      .
      .
      </div>
      <div className="footer_bottom">
        <Footer />
      </div>

    </div>
  );

Footer.js

  return (
    <div className="footer">
    <img className="ic_bottom_home" src={ic_bottom_home} alt="" />
    <img className="ic_bottom_meter" src={ic_bottom_meter} alt="" />
    <img className="ic_group" src={ic_group} alt="" />
    </div>

  );
1 Answers

It works

.footer_bottom {
  position: absolute;
  bottom: 0;
  width:100%;
}
Related