固定侧边栏可以垂直调整大小答案

【问题标题】：Fixed sidebar that can be resized vertically固定侧边栏可以垂直调整大小
【发布时间】：2017-12-21 09:15:54
【问题描述】：

我正在创建一个引导网站。我在正文中有两个 div，侧边栏和内容。我在右边有一个内容 div，它的高度取决于 div 中的内容量。我在左侧有一个侧边栏 div，需要将其固定为屏幕大小的 100%。因此，当您在内容 div 中滚动时，侧边栏 div 不会移动。

如何在两个 div 之间添加一个拆分处理程序，以便在水平拖动拆分器时调整两个 div 的宽度？

当我将position: fixed 分配给侧边栏 div 时遇到了问题。

<body>
    <div class="sidebar"></div>
    <div class="splitter"></div>
    <div class="content"></div>
</body>

【问题讨论】：

您能否详细说明 `position: fixed;" 问题？

标签： html css bootstrap-4

【解决方案1】：

我认为您正在寻找这样的东西：

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.left {
  position: fixed;
  height: 100%;
  width: 250px;
  
  /* for testing*/
  background-color: green;
  color: white;
  padding: 10px;
}

.right {
  position: absolute;
  left: 250px;
  width: 100%;
  
  /* for testing*/
  background-color: blue;
  color: white;
  padding: 10px;
}

<div class="left">test</div>

<div class="right">
  START!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br
  /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br />  Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello
  World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br
  /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br />  Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> Hello World!<br /> END!
  <br />
</div>

至于“我还需要两个 div 之间的拆分处理程序，这将允许我在水平拖动拆分器时调整两个 div 的宽度。”你的意思是能够单独拖动它们还是你只是想要响应？

【讨论】：

我希望能够拖动将两个 div 向左或向右（水平）分隔的垂直边框。当您向左或向右拖动边框时，两个 div 的宽度会根据您拖动垂直边框的方向而变小或变大。