Strona HTML ze standardowym układem stopki nagłówka bez użycia znacznika tabeli

Jak mogę uzyskać to, co jest widoczne na obrazie bez użycia tabel? Chcę, aby układ obejmował całą wysokość / szerokość strony, nawet jeśli okno przeglądarki zostanie zmienione.

Właśnie to próbowałem do tej pory. Jest blisko, ale nie wygląda profesjonalnie.

<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>

Czyste i proste css byłoby bardzo mile widziane.

questionAnswers(4)

yourAnswerToTheQuestion