Ha, nice one Paul. I was just going to post another modified version of something you’ve done in the past, so I might as well post it anyway.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body, html {
height:100%;
background:#000;
margin:0;
padding:0;
}
.wrapper {
height:100%;
width:100%;
background:#333;
display:table;
}
.tr {display:table-row}
.tc {
display:table-cell;
vertical-align:top
}
.footer {
height:1px;
background:orange
}
.header {
background:red;
height:1px
}
.inner {
height:100%;
background:yellow;
display:table;
width:80%;
margin:auto;
table-layout: fixed;
}
.main3{background:green}
.inner > div {width: 50%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="tr">
<div class="tc header">
<p>Header section</p>
</div>
</div>
<div class="tr">
<div class="tc main">
<div class="inner">
content
</div>
</div>
</div>
<div class="tr">
<div class="tc footer">Footer</div>
</div>
</div>
</body>
</html>