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

Posted 2023-03-06

【中文标题】创建具有固定标题、固定侧边栏导航、使用 flexbox 固定内容的布局

【英文标题】：Creating a layout that has a fixed header, fixed sidebar nav, fixed content with flexbox

【发布时间】：2017-09-20 05:40:45

【问题描述】：

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

这是我想要的结构：

第 1 行：固定页眉高度为 64 像素。 Row2：固定侧导航占用左侧 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% 的屏幕，并带有自己的滚动条。实际的浏览器滚动条不应水平或垂直显示。

【问题讨论】：

你的尝试在哪里，你有没有做过任何尝试来解决这个问题？

【参考方案1】：

我会让body 在100vh 高度上弯曲column，设置#row2 增长并在.sidenav 和.main-content 上使用overflow-y: scroll

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>

【讨论】：

@MichaelCoker 这就是为什么我将您的答案标记为正确的原因，因为它确实使用了 flex。

啊哈哈哈哈哈哈哈哈哈哈就这样啊哈哈哈哈

@BlakeRivell 下次在您的问题中更具体地说明您想要什么，如果您说“固定标头”，那么它的固定标头使用固定位置始终固定。只是一个建议

@BlakeRivell 是的，有父母和孩子。如果孩子们有满足感，他们也可以成为父母。所以 body 是一个 flex column （堆叠在顶部而不是水平排列）。 #row1 将 flex-grow 填充可用空间。 sidenav 有一个 250px 的flex-basis，主要内容也会flex-grow 填满可用空间。速记 flex 采用 3 个值 - flex-grow、flex-shrink 和 flex-basis。这是我学习 flex 的指南css-tricks.com/snippets/css/a-guide-to-flexbox

@BlakeRivell 您可以在所有内容周围放置一个包装器并在其上使用 flex 而不是 body，但除非您有特定理由不这样做，否则在 body 上使用它没有害处。没有额外的包装器，它的标记更少。

【参考方案2】：

这是使用 flexbox 的一种方式

body,
html 
  height: 100%;
  margin: 0


#row1 
  display: flex;
  height: 64px;
  background: red;
  position: fixed;
  width: 100%;


#row2 
  display: flex;
  top: 64px;
  position: relative;
  height: calc(100% - 64px);
  width: 100%


.sidenav 
  position: fixed;
  width: 250px;
  height: calc(100% - 64px);
background: green;
  overflow-y: scroll


.main-content 
  flex: 1;
  background: blue;
  overflow-y: scroll

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

【讨论】：

以防万一我添加了overflow:scroll ，仍然没有得到固定的页眉/页脚。

是的，侧边栏是在这种情况下杀死我的原因，也是我发布问题的原因。否则你做的一切都是正确的。为什么滚动只对内容有效？

是啊啊啊啊 :) ...加 1