html - CSS Display in Grid or table -

hi guys need displaying layout in css. here want layout display like.

here have far in css can't menu zone expand down height. suggestions? i'm using display grid 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>

here's flexbox solution give greater support grid columns. if don't flexbox can use float based solution have greater support.

i won't go lot of detail key takeaways are:

• flex-grow, tells element take remaining space of it's parent element. handy stretching elements out unknown widths, flexible.
• min-height: 100vh in body, allows layout take full viewport if not enough content fill it. provides context in flex-grow can grow into. without min-height: 100vh; flex-grow doesn't have space stretch elements out in.
• 100vh min-height, uses viewport units establish minimum height 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>