React

by SuperMe79

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/semantic.min.js"></script>
<div id="app"></div>

CSS

.app {
    display: flex;
    height: 100vh;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: lightyellow;
}

.header {
    flex-shrink: 0;
    background-color: lightsalmon;
}

.content {
    flex-grow: 1;

    /* this adds a scrollbar when the content takes up more space than available to display */
    overflow: auto;

    background-color: lightgreen;
}

.footer {
    flex-shrink: 0;
    background-color: lightblue;
}

React

const App = () => {
    return (
        <div className="ui app">
            <div className="ui header">
                <div className="ui center aligned grid">
                    <div className="column">
                        Header
                    </div>
                </div>
            </div>
            <div className="content">
                Content
            </div>
            <div className="footer">
                Footer
            </div>
        </div>
    );
};

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