网格或表格中的CSS显示

Question

嗨大家我需要帮助在CSS中显示布局。这是我希望布局显示如。

这是我到目前为止在CSS中所拥有的但是无法让菜单区域完全向下扩展高度。有什么建议？我使用显示网格作为布局。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一个flexbox解决方案，可为您提供比grid columns更大的支持。如果你不喜欢flexbox，你总是可以使用基于浮点数的解决方案，这种解决方案可以获得更大的支持。

我不会详细介绍，但关键的要点是：

• flex-grow告诉元素占用其父元素的剩余空间。非常方便将元素拉伸到未知宽度，也很灵活。
在min-height: 100vh中的
• body，如果布局的内容不足以填充，则允许布局占用整个视口。这也提供了flex-grow可以成长的背景。如果没有min-height: 100vh; flex-grow，则没有任何空间来拉伸元素。
对于100vh，
• min-height使用视口单元来确定body元素的最小高度。 100vh，表示使用视口的垂直高度（vh）的100％。

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

使用网格，您可以只使用所需的最小语义标记：

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