html - 网格或表格中的 CSS 显示

Question

大家好，我需要帮助在 CSS 中显示布局。这是我希望布局显示的样子。

这是我目前在 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: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

这里有一个 flexbox 解决方案，它会比 grid columns 给你更多的支持。如果你不喜欢 flexbox，你总是可以使用基于 float 的解决方案，它会得到更好的支持。

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

• flex-grow，告诉元素占用其父元素的剩余空间。将元素拉伸(stretch)到未知宽度非常方便，也很灵活。
• min-height: 100vh in body，这允许布局在没有足够的内容填充时占据整个视口(viewport)。这也提供了 flex-grow 可以增长到的上下文。没有 min-height: 100vh; flex-grow 没有任何空间来拉伸(stretch)元素。
• 100vh 用于 min-height，使用视口(viewport)单位来确定 body 元素可以达到的最小高度。 100vh，表示使用 100% 的视口(viewport)垂直高度 (vh)。

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>