如何在内容溢出时保持侧边栏和标题固定答案

【问题标题】：How to keep sidebar and header fixed with overflow on content如何在内容溢出时保持侧边栏和标题固定
【发布时间】：2022-07-06 03:02:54
【问题描述】：

如何只使#content 可滚动但保持#header 和#sidebar 固定？

flexbox 是最好的方法吗？

https://jsfiddle.net/3pnj1k5b/

html,
body {
  margin: 0;
}

#page-app {
  display: flex;
  height: 100%;
  background: red;
}

#sidebar {
  width: 200px;
  background: blue;
}

#header {
  height: 60px;
  background: pink;
}

#body {
  flex: 1;
  background: green;
}

#content {
  overflow: auto;
}

<div id="page-app">
  <section id="sidebar">
    sidebar
  </section>
  <div id="body">
    <header id="header">
      header
    </header>
    <section id="content">
      content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
    </section>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

position:fixed 将元素固定到它们的位置。这基本上就是我添加的内容。

html,
body {
  margin: 0;
}

#page-app {
  display: flex;
  height: 100%;
  background: red;
}

#sidebar {
  position: fixed;
  height: 100%;
  width: 200px;
  background: blue;
  z-index: 2
}

#header {
  height: 60px;
  background: pink;
  position: fixed;
  padding-left: 200px;
  width: 100%;
  z-index: 1;
}

#body {
  flex: 1;
  background: green;
}

#content {
  overflow: auto;
  margin-left: 200px;
  margin-top: 60px;
}

<div id="page-app">
  <section id="sidebar">
    sidebar
  </section>
  <div id="body">
    <header id="header">
      header
    </header>
    <section id="content">
      content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b content
      <br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b

    </section>
  </div>
</div>

【讨论】：

您可能希望在内容部分添加上边距，以便内容不会隐藏在固定标题下
这个答案和@Kameron's 的区别在于这个答案的滚动是在窗口上，而另一个答案是内容 div 本身的滚动

【解决方案2】：

制作html,body height: 100%;。然后将max-height 添加到#page-app。然后制作#sidebar 和#header position: sticky;。最后，只需将#content 的height 设置为100% 减去header 的高度。在您的情况下，我使用 calc 来设置该高度。见下文：

html,
body {
  margin: 0;
  height: 100%;
}

#page-app {
  display: flex;
  max-height: 100%;
  background: red;
}

#sidebar {
  width: 200px;
  background: blue;
  position: sticky;
}

#header {
  height: 60px;
  background: pink;
  position: sticky;
}

#body {
  flex: 1;
  background: green;
}

#content {
  overflow: auto;
  height: calc(100% - 60px);
}

<div id="page-app">
  <section id="sidebar">
    sidebar
  </section>
  <div id="body">
    <header id="header">
      header
    </header>
    <section id="content"> content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
    </section>
  </div>
</div>

【讨论】：

【解决方案3】：

使用overflow-y: scroll; 使标题position: sticky 和正文可滚动

html,body{
  margin:0;
  height: 100%;
  position: relative;
}

#page-app{
  display:flex;
  height:100%;
  background:red;
  overflow-y: hidden;
}

#sidebar{
  width:200px;
  height: 100%;
  background:blue;
}

#header{
  height:60px;
  background:pink;
  position: sticky;
  top: 0;
}

#body{
  flex:1;
  background:green;
  overflow-y: scroll;
}

【讨论】：