网格或表格中的 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，您可以随时使用基于浮动的解决方案，它会获得更大的支持。

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

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

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