大家好,我需要帮助在 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>
最佳答案
这里有一个 flexbox
解决方案,它会比 grid columns
给你更多的支持。如果你不喜欢 flexbox,你总是可以使用基于 float 的解决方案,它会得到更好的支持。
我不会详细介绍,但关键要点是:
flex-grow
,告诉元素占用其父元素的剩余空间。将元素拉伸(stretch)到未知宽度非常方便,也很灵活。min-height: 100vh
inbody
,这允许布局在没有足够的内容填充时占据整个视口(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>
关于html - 网格或表格中的 CSS 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43237527/