JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
	<header class="main-header row">
        <h1>RWD Sticky-Footer</h1>
	</header>
	<main class="main-content row push" role="main">
        <h1>Ăśberschrift</h1>
        <p>Inhalte</p>
	</main>
	<footer class="main-footer row" role="contentinfo">
	    Copyright
	</footer>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    margin:0;
    padding:0;
}

html,
body { height: 100%; }

.page {
	display: table;
	height: 100%;
    margin: 0 auto;
    max-width: 1000px;
    width: 95%;
}

.main-header,
.main-footer {
    background-color: #efefef;
    text-align: center;
}

.row {
	display: table-row;
	height: 1px;
}
.push { height: auto; }