CODEWITHSUNDEEP
cssreactjs
gilagan
gilagan

Reputation: 31

React sticky footer moves up when there is less content on the page

My web app's footer won't stay at the bottom when there is less content on the page. I'm stuck and not sure where to go from here. Can someone help me with a footer that will stay at the bottom of the page and below any content?

const routing = (
    <Router>
        <div>
            <div>
                <Navbar />
                <Route exact path="/" component={() => (<Redirect to='/home' />)} />
                <Route path="/home" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/films" component={Films} />
                <Route path="/markets" component={Markets} />
                <Route path="/news" component={News} />
                <Route path="/contact" component={Contact} />
                <Route path="/admin" component={Admin} />
                <Footer />
            </div>
        </div>
    </Router>
)

CSS:

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

This is how it looks like:

enter image description here

Upvotes: 0

Views: 835

Answers (2)

user10939189
user10939189

Reputation:

Put your footer as position: absolute, and on body put position: relative, so your footer's position is relative to your body.

Then bottom should be 0 or 100, I forgot but either one should make the footer stick to the bottom.

Upvotes: 0

Louis
Louis

Reputation: 185

Sticky won't work because the div is "treated as relatively positioned until its containing block crosses a specified threshold."

Try this: position: absolute, bottom: 0

Upvotes: 1

Related Questions