CSS Display in Grid or table - html

Question

Hi Guys I need help displaying layout in CSS. Here is i want the layout to display like.
Here is what i have so far in CSS but can't get the menu zone to fully expand down height. Any suggestions? i'm using display grid as layout.
.page{
display: grid;
grid-template-columns:29% 71%;
justify-content: flex-start;
align-content: start;
}
.section-header{
grid-column: 1/3;
display:grid
grid-row:row;
background-color:blue;
color:#fff;
}
.zone-menu-wrapper{
grid-row:1/3;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
grid-column:2/3;
background-color:orange;
}
.section-footer{
grid-column: 2/3;
background-color:yellow;
}
.zone-branding-wrapper{
grid-column:2/3;
}
.zone-menu{
width:29%;
display:inline-block;
}
<div class="page">
<header class="section-header">
<div class="zone-topper-wrapper">Top Zone</div>
<div class="zone-menu-wrapper">Menu Zone</div>
</header>
<main class="section-main">
<div class="zone-branding-wrapper">Branding Zone</div>
<div class="zone-content-wrapper">Content Zone</div>
</main>
<footer class="section-footer">
<div class="zone-footer-wrapper">Footer Zone</div>
</footer>
</div>
</pre>

Answer 1

Here's a flexbox solution that will give you greater support than grid columns. If you don't like flexbox you can always use a float based solution which would have even greater support.
I won't go into a lot of detail but the key takeaways are:
flex-grow, tells the element to take up the remaining space of it's parent element. Very handy for stretching elements out to unknown widths, also flexible.
min-height: 100vh in body, this allows the layout to take up the full viewport if their is not enough content to fill it. This also provides a context in which flex-grow can grow into. Without min-height: 100vh; flex-grow doesn't have any space to stretch elements out in.
100vh for min-height, uses viewport units to establish the minimum height the body element can be. 100vh, says use 100% of vertical height (vh) of viewport.
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
.wrap {
display: flex;
flex-direction: row;
flex-grow: 1;
background-color: indianred;
}
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
header {
background-color: darkseagreen;
}
aside {
background-color: skyblue;
}
main {
flex-grow: 1;
background-color: gold;
}
<header>
Header
</header>
<div class="wrap">
<aside>
Sidebar
</aside>
<div class="content">
<main>
Main
</main>
<footer>
Footer
</footer>
</div>
</div>

Answer 2

with grid, you may use just the minimal semantic markup needed:
body {
display: grid;
grid-template-columns: 29% 71%;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header header" "nav main" "nav footer";
height: 100vh
}
header {
grid-area: header ;
}
nav {
grid-area: nav ;
grid-column: 1;
}
main,
footer {
grid-column: 2;/* or grid-area for each of them */
}
/*makup*/
header,
nav {
background: tomato;
}
main {
background: turquoise
}
footer {
background: orange;
}
body>* {
padding:1em;
box-shadow:0 0 1px
}
<header>header</header>
<nav> nav </nav>
<main> main</main>
<footer>footer</footer>

Answer 3

<div class="page">
<header class="section-header">
<div class="zone-topper-wrapper">Top Zone</div>
</header>
<div class="zone-menu-wrapper">Menu Zone</div>
<main class="section-main">
<div class="zone-branding-wrapper">Branding Zone</div>
<div class="zone-content-wrapper">Content Zone</div>
</main>
<footer class="section-footer">
<div class="zone-footer-wrapper">Footer<br> Zone</div>
</footer>
</div>
CSS
.page{
display: grid;
grid-template-columns:29% 71%;
justify-content: flex-start;
align-content: start;
}
.section-header{
grid-column: 1/3;
display:grid
grid-row:row;
background-color:blue;
color:#fff;
}
.zone-menu-wrapper{
grid-row:2/4;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
grid-column:2/3;
background-color:orange;
}
.section-footer{
grid-column: 2/3;
background-color:yellow;
}
.zone-branding-wrapper{
grid-column:2/3;
}
.zone-menu{
width:29%;
display:inline-block;
}
https://codepen.io/ak472526/pen/dvLaGX