JSFiddle - React, Tailwind, and code Playground

by Max Lensky

HTML

<header>header</header>
<main>Если ничего не ввести, то не отображается даже при заданной высоте. </main>
<footer>footer</footer>

CSS

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
html,body{
	height:100%;
	position:relative;
}
header{
  height: 50px;
  width: 100%;
  background: #F5A9A9;
}

main{
  //display: block; // Кроссбраузерность для IE
  height: 150px;
  width: 100%;
  background: #F5F6CE;
	padding-bottom:50px;
}

footer{
  height: 50px;
  width: 100%;
  background: #E0F8E6;
	position:absolute;
	bottom:0;
}