html - 滚动条更改双列 html 布局中第二列的大小

Question

我有非常基本的两列布局。左列包含菜单，右列包含内容。我想将内容放在中间。对于菜单我使用绝对定位，内容有一定的边距重叠菜单，为了让内容出现在中间我添加了边距。但是，当内容高度太大时，会出现滚动条并使内容缩小。而且那种缩背用力的收缩是不合适的。

为了防止这种情况，我将最大宽度设置为与滚动条的内容宽度完全匹配的内容元素。我不认为这是一个很好的解决方案，因为在小屏幕上我仍然会遇到问题。在这种情况下，您会推荐什么？

https://jsfiddle.net/vntkja1b/4/

var state = true;
$('#toggle').click(function (){
	if (state){
  		for(var i = 0; i< 100; i++){
      	$('.some-lines').append($('<div> hello</div>'));
      }
  } else {
  	$('.some-lines').empty();
  }
  state = !state;
});

body{ margin: 0}

.container__left-col{
  background-color: blue;
  position: fixed;
  left:0;
  top:0;
  width:300px;
  height:100%;
}
.container__right-col{
  margin: 0 0 0 300px;
  height:100%;
}

.content__wrapper{
  background-color: white;
  height:100%;
}

.content{
  margin: 0 25px 0 25px;
  background-color: red;
  height:100%;
  /* max-width:300px; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="container__left-col">
  kappa
  </div>
  <div class="container__right-col">
    <div class="content__wrapper">
      <div class="content">
        <div class="some-controll">
          <input id="toggle" type="button" value="Toggle"/>
        </div>
        <div class="some-lines">
        
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我找到了解决方案，但它仅适用于 chrome。我注意到 gmail 有一种奇怪的滚动条。

所以他们为滚动条定制了样式并且它一直可见

.scrollbar {
   overflow-y: scroll;
}

然后他们定制了轨道，使其类似于背景并隐藏了上/下箭头。所以只有拇指是可见的。

.scrollbar::-webkit-scrollbar-track {
    background-color: white;
}
.scrollbar::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}