固定工具栏及其下的div可以滚动

Question

我有问题。

我的页面分为左右两部分。 每个部分都有自己的工具栏和工具栏下的内容。

我想让工具栏修复，只有内容滚动。

但是当我制作内容 {overflow:scroll} 时， 太长的内容文本将在 div 之外。

当我制作两个部分{overflow:scroll}，两个工具栏{position:fixed}时，工具栏1的宽度将为100%，覆盖工具栏2。

p.s.此页面使用 javascripts。一种是粘性页脚，一种是如果主要内容的文本太短，它的 div 可以随窗口调整大小。

.left {
  float: left;
  width: 20%; 
}
.right {
  float: right;
  width: 80%;
} 
.toolbar1 {
  position: fixed;
  background-color: red;
}
.toolbar2 {
  position: fixed;
  background-color: yellow;
}
.scroll {
  overflow: scroll;
}
.clear {
  clear: both;
}

<div class="left">
  <div class="toolbar1">asdfgh</div>
  <div class="scroll">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
</div> 
<div class="right">
  <div class="toolbar2">123123</div>
  <div class="scroll">1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
</div> 
<div class="clear"></div>
<footer>footer</footer>

Answer 1

几个问题。

• 如果固定工具栏应该分别固定到left 和right 容器，您应该为这些容器指定display:relative 的样式，以便浏览器知道将工具栏固定到什么。否则，即使容器的位置发生变化，工具栏也会固定在窗口中的相同位置。
• 虽然scroll div 有overflow:scroll，但这并不意味着它们会有工作滚动条。 overflow 属性不会影响 height 属性，因此 div 仍将与其内容的高度相同。
• 因为工具栏是fixed，所以它们并不真正占用容器中的空间，而且scroll div 从顶部开始，这意味着scroll div 将被工具栏部分隐藏。

现在，如果您真的希望工具栏为fixed，一个可能的解决方案是在顶部为scroll div 提供一个填充，这样它们的第一行就不会隐藏在工具栏后面。

（请注意，在此示例中，我还冒昧地限制了 scroll div 的高度，以便它们实际滚动。）

.left {
  float: left;
  width: 20%; 
  position:relative; /* new */
}
.right {
  float: right;
  width: 80%;
  position:relative; /* new */
} 
.toolbar1 {
  position: fixed;
  background-color: red;
}
.toolbar2 {
  position: fixed;
  background-color: yellow;
}
.scroll {
  overflow: scroll;
  padding-top:1.25em; /* new */
  height:6em;         /* this just added for demonstration */
}
.clear {
  clear: both;
}

<div class="left">
  <div class="toolbar1">asdfgh</div>
  <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div>
</div> 
<div class="right">
  <div class="toolbar2">123123</div>
  <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div>
</div> 
<div class="clear"></div>
<footer>footer</footer>

这使得工具栏的问题不是其容器的全宽。您可以通过将它们的宽度也分别设置为 20% 和 80%（与容器的宽度相同）来解决此问题。

但是，如果您尝试按照我的想法去做，那么您甚至根本不需要工具栏的 position:fixed。只需将它们放在顶部和它们下方的可滚动div；这将在不损失功能的情况下简化 CSS。
此外，工具栏将自动具有容器的全宽，而不会溢出。
顺便说一句，如果您永远不需要水平滚动，最好将overflow 更改为overflow-y。这样，您只会得到垂直滚动条。但这取决于你。

.left {
  float: left;
  width: 20%; 
}
.right {
  float: right;
  width: 80%;
} 
.toolbar1 {
  background-color: red;
}
.toolbar2 {
  background-color: yellow;
}
.scroll {
  overflow: scroll;
  height:6em;         /* again, added for demonstration */
}
.clear {
  clear: both;
}

<div class="left">
  <div class="toolbar1">asdfgh</div>
  <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div>
</div> 
<div class="right">
  <div class="toolbar2">123123</div>
  <div class="scroll">one<br>two<br>three<br>four<br>five<br>six<br>seven</div>
</div> 
<div class="clear"></div>
<footer>footer</footer>