Fixed toolbar and the div under it can scroll

Question

I have a problem.

My page is divided by left and right part. Each part has its toolbar and the content under the toolbar.

I want to let the toolbar fix, only the content scroll.

but When I make the content {overflow:scroll}, the too long content text will outside of the div.

When I make the two part {overflow:scroll}, two toolbar{position:fixed}, the width of toolbar 1 will be 100%,covering toolbar2.

p.s.this page uses javascripts. One is the sticky footer, and one is if the text of main content is too short, its div can be resize with the window.

.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

A couple of problems.

• If the fixed toolbars are supposed to be fixed to the left and right containers respectively, you should give those containers a style of display:relative so that the browser knows what to fix the toolbar to. Otherwise the toolbars will be fixed to the same position in the window even if the position of the containers change.
• Although the scroll divs have overflow:scroll, that doesn't mean they will have working scrollbars. The overflow property does not influence the height property, so the divs will still be the same height as their contents.
• Because the toolbars are fixed, they don't really take up space in the containers, and the scroll divs start from the top, which means that the scroll divs will be partially hidden by the toolbars.

Now if you really want the toolbars to be fixed, a possible solution would be to give the scroll divs a padding at the top, so their first lines are not hidden behind the toolbars.

(Please note that in this example I also took the liberty of restricting the heights of the scroll divs, so that they do actually scroll.)

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

That leaves the matter of the toolbars not being the full widths of their containers. You could solve this by setting their widths also, to 20% and 80% respectively (the same widths as the containers).

However, if you're trying to do what I think you are, you don't even need the position:fixed for the toolbars at all. Just put them on top and the scrollable divs below them; this will simplify the CSS with no loss of functionality.
In addition, the toolbars will have the full width of the containers automatically, without overflowing out of them.
By the way, if you never need to scroll horizontally, you'd be better off changing the overflow to overflow-y. That way, you'll only get vertical scrollbars. But that's up to you.

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