2

I'm making a website, and I'm trying to make the footer always at the bottom. I want it so that the footer is always at the bottom at the browser window, but if the content is long enough, it will push the footer out of sight and further bottom. Right now, the footer is always positioned immediately after the content above it.

enter image description here

I tried setting display: flex, flex-direction, align-items: flex-end, margin-bottom: 0px, but it didn't work. I'm also trying to avoid setting fixed heights.

Relevant Code

Footer.js

<footer className='footer'>
    <div className='icons'>
        <span><a href='/'><img src={LinkedIn} alt='LinkedIn'/></a></span>
        <span><a href='/'><img src={Mail} alt='Email' /></a></span>
        <span><a href='/'><img src={Resume} alt='Resume' /></a></span>
    </div>
    <div>
        <span className='footer-link'><a href='/'>Home</a></span>
        <span className='footer-link'><a href='/about'>About</a></span>
        <span className='footer-link'><a href='/blog'>Blog</a></span>
        <span className='footer-link'><a href='/contact'>Contact</a></span>
    </div>
    <div className='footer-copyright'>2020 Daniel Zhang. This site was made by Daniel Zhang from scratch with React.</div>
</footer>

.footer {
    align-items: center;
    border-top: 1px solid grey;
    border-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: 12px;
    margin: 0px auto;
    padding: 10px 0px;
    text-align: center;
}

.icons img {
    display: inline-block;
    padding: 10px;
    width: 25px;
}

.footer-link {
    padding: 0px 5px;
}

.footer-link a {
    color: grey;
    text-decoration: none;
}

.footer-link a:hover {
    color: black;
    text-decoration: none;
}

.footer-copyright {
    padding: 5px 0px;
}

App.js

<NavBar />
<Router>
  <Switch>
    <Route exact path='/' render={() => <Home />} />
    <Route exact path='/about' render={() => <About />} />
    <Route exact path='/blog' render={() => <Blog />} />
    <Route exact path='/contact' render={() => <Contact />} />
    {/* Adds page not found. */}
    <Route render={() => <Home />} />
  </Switch>
</Router>
<Footer />

App.css

* {
    font-family: 'Lato', sans-serif;
}

html, body {
    height: 100%;
    margin: 0px;
}

body {
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1 0 auto;
    margin: 0px auto;
    width: 65%;
}
Daniel Zhang
  • 191
  • 2
  • 12

4 Answers4

3

Try flex-direction: column;.

document.getElementById('add').addEventListener('click', e => {
  document.getElementById('content').innerHTML += '<br />content<br />content<br />content';
});
html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
}

.footer {
  background: #999;
  flex-shrink: 0;
}
<body>
  <div class="content">
    <button id="add">Add Content</button>
    <p id="content">content</p>
  </div>
  <footer class="footer">footer</footer>
</body>
zmag
  • 7,825
  • 12
  • 32
  • 42
  • I tried that and it made no changes. I added App.css for you to see. It seems like the height isn't making the height 100%. – Daniel Zhang Aug 11 '20 at 15:28
1

you can use the property position: fixed;

body {
  min-height: 100vh;
}
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
Yony Calsin
  • 235
  • 2
  • 3
1

Please try this code.

body{
padding-bottom:50px; //same to the height of footer to avoid overlapping with fixed element
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:50px; //set height as per your requirement
    z-index:10;
    overflow:hidden;
}
Pranay kumar
  • 1,983
  • 4
  • 22
  • 51
0

You can make use of bootstrap and use this class below.

<div className="fixed-bottom">
Trojancodes
  • 21
  • 3