javascript - 使用 flexbox 创建具有固定标题、固定侧边栏导航、固定内容的布局

Question

我正在使用 FlexBox 为 Web 应用程序创建布局。请注意，我并没有尝试为此使用 Bootstrap 。我只想用普通的 flexbox css 来做。

这是我想要的结构:

第 1 行:固定标题为 64 像素高。Row2:固定 sidenav 占据左侧 250px，固定内容占据右侧剩余部分。

<div id="row1">
     <div class="header"></div>
</div>
<div id="row2">
     <div class="sidenav"></div>
     <div class="main-content"></div>
</div>

这里的关键是 sidenav 和 main-content 都应该是 100% 的屏幕，并且有自己的滚动条。实际的浏览器滚动条不应水平或垂直显示。

Answer 1

我会让 body 成为 100vh 高度的 flex column，设置 #row2 增长并使用 overflow-y:在 .sidenav 和 .main-content

上滚动

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#row2 {
  display: flex;
  flex: 1 0 0;
}
.header {
  height: 64px;
}
.sidenav {
  flex: 0 0 250px;
}
.main-content {
  flex: 1 0 0;
}
.sidenav, .main-content {
  overflow-y: scroll;
}

<div id="row1">
     <div class="header">header</div>
</div>
<div id="row2">
     <div class="sidenav">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div>
     <div class="main-content">foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br>foo<br></div>
</div>