<body class="main">
<header>This is the header</header>
<div class="content" contenteditable="true">Text here</div>
<footer>Footer here!</footer>
</body>
html, body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.main {
background-color: #99CCFF;
color: #fff;
display: flex;
min-height: 100vh;
flex-direction: column;
}
header, footer {
display: flex;
width: 100vw;
box-sizing: border-box;
}
header {
padding: 20px;
background-color: #FFCC99;
}
.content {
padding: 20px;
flex: 1;
box-sizing: border-box;
}
footer {
padding: 20px;
background-color: #FFCC99;
}