HTML-страница со стандартным макетом нижнего колонтитула без использования табличного тега
Как я могу получить то, что показано на картинке, не используя таблицы? Я хочу, чтобы макет занимал всю высоту / ширину страницы, даже если размер окна браузера изменен.
Это то, что я пробовал до сих пор. Это близко, но не выглядит профессионально.
<html>
<body>
<div>
<div style="border-style: solid; height: 20%">
Header</div>
<div style="overflow: hidden; height: 55%">
<div style="border-style: solid; float: left; width: 20%; height: 100%;">
left</div>
<div style="border-style: solid; float: left; width: 57%; height: 100%;">
content</div>
<div style="border-style: solid; float: left; width: 20%; height: 100%;">
right</div>
</div>
<div style="border-style: solid; height: 20%">
Footer</div>
</div>
</body>
</html>
Чистый и простой CSS будет принята с благодарностью.