React

HTML

<div id="root"></div>

CSS

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

.app-container{
  display: flex;
  flex-flow: column;
  height: 100%;
}

.nav-container{
  flex: 0 1 auto;
}
.content-container{
  flex: 1 1 auto;
}
.footer-container{
  flex: 0 1 auto;
}

React

class Footer extends React.Component {
	render() {
    return(
			<footer className="footer-container">
			  <p>This is some footer content</p>
			</footer>
    )
  }
}


class FullHeightBody extends React.Component {
  
  render() {
    return (
      <div className="content-container">
        <h2>Testing Testing</h2>
      </div>
    )
  }
}


class App extends React.Component {

	render() {
  	return(
    	<div className="app-container">
    	  <FullHeightBody/>
        <Footer/>
    	</div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#root"))