JSFiddle - React, Tailwind, and code Playground

HTML

<div id=container>
        <header>
            <div class="header-holder">
                logo
            </div>
       </header>
<section class=content>		

    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>

</section>
<footer>
        footer
</footer>
</div><!-- end container -->

CSS

html, body {height: 100%; margin: 0; padding: 0}
header, section, footer {display:block}
#container {
	height: 100%;
	position: relative;
	max-width: 400px;
	margin: 0 auto;
}
header {
	width: 100%;
    left: 0;
	position: fixed;
	z-index: 1;
}
.header-holder{
    height: 99px;
    margin: 0 auto;
    max-width: 400px;
    background-color: #f00;
    border: solid green;
	border-width: 3px 0;
}
section.content {
	min-height: 100%;
	padding-top: 105px;
	position: relative;
	background-color: green;
	padding-bottom: 100px;   /* Высота футера*/
    box-sizing: border-box;
}
footer {
height:100px;
margin-top: -100px;
position:relative;
background: #6cf;
}