[solved] Floating/Sticky footer does not stick/float to bottom of viewport (React + CSS) Help

1

Happy Wednesday.

Could someone please help me with this footer that does not want to float (it isn’t sticky) please? (React + CSS)

CSS:

.container {
  position: relative;
  line-height: 1.5;
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  position: absolute;
	font-size: small;
  color: #fff;
  background-color: #262626;
	display: flex;
  width: 100vw;
  height: 4rem;
}

.footer-options {
		width: 50vw;
		display: flex;
		justify-content: flex-start;
    padding-inline-start: 20px;
    align-items: center;

}

.footer-link {
	 	padding: 0 20px;
  	list-style: none;
}
	

footer span {
		width: 50vw;
		display: flex;
		justify-content: flex-end;
		padding: 0 20px;
    align-items: center;
	}

@media (max-width: 600px)  {
  
	footer {
				flex-wrap: wrap;
        height: 5rem;  
	}
	
	.footer-options {
		width: 100vw;
		flex-direction: row;
		justify-content: center;
    padding-inline-start: 0;
    align-items: center;
	}
	
	footer span {
				width: 100vw;
				flex-direction: column;
   			text-align: center;
        align-self: flex-start;
	}	
}

/* adjusting styling */

.editLayout,
.previewLayout {
  width: 100%;
}

.editLayout {
  background: #333;
  height: 100vh;
}

.previewLayout {
  height: 100vh;
}

#preview, #edit {
  padding-left: 50px;
}

#preview {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#edit {
  width: 90%;
  height: 90%;
  background-color: inherit;
  color: #ffffff;
  border: none;
  outline: none;
  resize: none;
  font-size: 14px;
  margin-top: 20Px;
  font-family: 'Source Code Pro', monospace;
}

header {
  background-color: #262626;
  color: #ffffff;
  text-align: center;
  padding: 15px 0;
  font-weight: 700;
}

REACT:

...
return (
    <React.Fragment>
      <div className="container">
        <section className="editLayout">
          <header> Edit</header>
          <textarea id="edit" value={input} onChange={handleChange}></textarea>
        </section>
        <section className="previewLayout">
          <header><i class="mdi mdi-television-guide"></i>Preview</header>
          <div id="preview" dangerouslySetInnerHTML={mark(input)} />
        </section>  
      </div>
      <footer>
		<ul className="footer-options">
      <li className="footer-link"><a href="#" className="footer-linktext">Legal</a></li>
      <li className="footer-link"><a href="#" className="footer-linktext">Contact Us</a></li>
    </ul>
<span>© 2019 Developed by Pat. All Rights Reserved.</span>
	    </footer>
    </React.Fragment>   
      )  
}
2

Try CSS:

footer {
  position: fixed; /* instead of absolute */
  bottom: 0;
  left: 0;
  /* The rest of the styles */
}
1 Like
3

The body is the height of the content, so it’s being absolutely positioned relative to that. Make the body height 100vh if that’s what you need. Also position fixed is what you want if you want it fixed in the same place

Edit: :point_up:

1 Like
4

Super, super thanks @DanCouper and @snigo! :raised_hands:

For others in the future: the left: 0 wasn’t needed in my case. And given the position: fixed on the footer I’ve then also removed the position: relative from container.

1 Like