<head>
<style>
:any { margin: 0; padding: 0; }
body {
box-sizing: border-box;
min-inline-size: 100vi; max-inline-size: 100vi;
min-block-size: 100vb; max-block-size: 100vb;
overflow: hidden;
display: grid; grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr;
:where(header, main, article, footer) { border: 1ex solid black; }
haeder { grid-area: "a"; background: lime; }
main { grid-area: "b"; background: cyan; }
article { grid-area: "c"; background: yellow; }
footer { grid-area: "d"; background: red; }
}
</style>
</head>
<body>
<header>Zyanisch? Oder sonst:</header>
<article>Wo ist derRahmen</article>
<main>unten und</main>
<footer>rechts denn nur geblieben?</footer>
</body>