Question

我有一个问题。

我的页面按左右部分划分。每个部分都有工具栏和工具栏下的内容。

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

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

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

。这页面使用了javascripts。一个是粘性页脚，一个是如果主要内容的文本太短，其div可以用窗口调整大小。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

有几个问题。

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

现在，如果您真的希望工具栏为fixed，可能的解决方案是在顶部为scroll div添加填充，因此它们的第一行不会隐藏在工具栏后面。< / p>

（请注意，在这个例子中，我也冒昧地限制scroll div的高度，以便它们实际上滚动。）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

但是，如果您尝试按照我的想法行事，您甚至根本不需要工具栏的position:fixed。只需将它们放在顶部，并将可滚动的div放在它们下面;这将简化CSS而不会丢失功能此外，工具栏将自动具有容器的整个宽度，而不会溢出它们顺便说一句，如果您永远不需要横向滚动，那么最好将overflow更改为overflow-y。这样，您只能获得垂直滚动条。但这取决于你。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

固定工具栏和它下面的div可以滚动

1 个答案: