Question

我正在创建一个bootstrap网站。我身体里有两个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>

Answer 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的宽度。”你的意思是能够单独拖动它们还是只想要响应？

修复了可以垂直调整大小的侧边栏

1 个答案: