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

Question

我正在使用FlexBox为Web应用程序创建布局.请注意,我不是为了这个而尝试使用bootstrap.我只想在普通的flexbox css中做到这一点.

这是我想要的结构:

第1行:固定标题,高64像素.第2行:修复了侧面占据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一个弯曲column的100vh高度,设置#row2成长和使用overflow-y: scroll上.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>