网格或表格中的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"> 
 
\t <header class="section-header"> 
 
\t \t <div class="zone-topper-wrapper">Top Zone</div> 
 
\t \t <div class="zone-menu-wrapper">Menu Zone</div> 
 
\t </header> 
 
\t <main class="section-main"> 
 
    <div class="zone-branding-wrapper">Branding Zone</div> 
 
\t \t <div class="zone-content-wrapper">Content Zone</div> 
 
\t </main> 
 
\t <footer class="section-footer"> 
 
\t \t <div class="zone-footer-wrapper">Footer Zone</div> 
 
\t </footer> 
 
</div> 
 
</pre>

Answer 1

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

我不会去到很多细节，但关键的外卖店：

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

<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

Answer 3

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

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>