2

I want the component currently being displayed as well as the links to stretch to the bottom of the page.
(Actually the footer should be at the bottom but the other component stretching and ending just before it.)

I also noticed that if I add a p tag at the bottom of the code, right before the last div in App.js it is placed at the bottom of the page.

I was thinking if this might be because I am using inline styles for each component in App.js. I tried to style each component in the code for that component, but for example the lists(nav) background color did end up not covering the entire list.

Edit: I found out that if I set the style height for the Row displaying the main content to 92.6% which makes it fill the screen entirely.

Currently looks like this

App.js code

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="App">
        <Router>
          <Container>
            {/* header */}
            <Row style={{backgroundColor: "#343a40", color:"white"}}>

              <Col >
                <Header />
                {/* <p>Header</p> */}
              </Col>
            </Row>

            {/* Content */}
            <Row style={{backgroundColor: "gray"}}>
              {/* Nav */}
              <Col style={{backgroundColor: "lightgray"}}>
                <Navigation id="appNav"/>
              </Col>

              {/* Main */}

              <Col xs={9}>
                <Switch>
                  <Route path="/" exact component={Home} />
                </Switch>
                <Switch>
                  <Route path="/about" exact component={About} />
                </Switch>
                <Switch>
                  <Route path="/submit" exact component={Submit} />
                </Switch>
                <Switch>
                  <Route path="/toplist" exact component={Toplist} />
                </Switch>
              </Col>
            </Row>

            {/* Footer */}
            <Row style={{backgroundColor: "lightgray"}}>
              <Col >
                <Footer/>
              </Col>
            </Row>
          </Container>
        </Router>

      </div>
    );
  }
}
gideonen
  • 53
  • 2
  • 8
  • Try giving `height: 100vh` to your App class. – Atin Singh May 02 '20 at 20:15
  • Duplicate of [this](https://stackoverflow.com/questions/41448221/bootstrap-fullscreen-layout-with-100-height) – Ibraheem Ahmed May 02 '20 at 20:17
  • I did not get it to work using their solutions, I also tried setting height to 100vh. I set the style height for the Row displaying the main content to 92.6% which makes it fill the screen entirely. If anyone comes up with a better solution please let me now. Also is it bad practice to write style on Rows in app instead of inside each component? – gideonen May 02 '20 at 20:45

1 Answers1

0

try to add position absolute to your footer: 

<Row style={{backgroundColor: "lightgray",position: "absolute", bottom: "0px"}}>
     <Col >
       <Footer/>
     </Col>
</Row>
Bhuwan Chandra
  • 294
  • 1
  • 9
  • It put the footer at the bottom left corner with the width equal to the string "Footer", the other components remained where they were. – gideonen May 02 '20 at 20:57
  • try to add `width: "100vw !important"` – Bhuwan Chandra May 02 '20 at 20:58
  • That worked! It put the footer at the bottom, did not work to write !important in the jsx styling. But just adding width: "100vw" put the footer at the bottom. But the other components are still in their original place Edit: the footer is a bit too big – gideonen May 02 '20 at 21:00
  • Also the page is higher than the screen size, so I can scroll. But if I use container fluid it is placed at the bottom with the same width as the other elements and the page height is correct. However components are still in their original place – gideonen May 02 '20 at 21:07