Question

我正在尝试使用下面的某些项目（复选框）和固定按钮构建侧边栏。

按钮必须紧挨着最后一个复选框（不在侧边栏底部），所以如果我缩小窗口（高度）或全屏，按钮必须仍然保持在同一位置（所以它必须遵循最后一个复选框的高度

如何使用基本的html / css构建它而不使用javascript或函数来计算侧边栏高度？

obj = JSON.parse(json);

我正在尝试使用固定高度和溢出滚动。 https://jsfiddle.net/28224v2j/ 正如您所看到的，如果我减少浏览器窗口的高度，我看不到按钮。我的目标也是在最后一个复选框下每次都看到按钮

Answer 1

这是你需要的吗？

＆＃13;

.sidebar {
  width: 200px;
  height: auto;
  overflow: scroll;
  float: left;
  display: flex;
  flex-flow: column;
}

.content {
  float: left;
  width: 400px;
}

.sidebar p {
  margin: 0;
  margin-bottom: 5px;
}

＆＃13;

<div class="sidebar">
  <p>SIDEBAR</p>
  <p><input type="checkbox" />Item 1</p>
  <p><input type="checkbox" />Item 2</p>
  <p><input type="checkbox" />Item 3</p>
  <p><input type="checkbox" />Item 4</p>
  <p><input type="checkbox" />Item 5</p>
  <p><input type="checkbox" />Item 6</p>
  <button>GO!</button>
</div>
<div class="content">
  <p>CONTENT</p>
</div>

＆＃13;

Answer 2

小提琴链接：https://jsfiddle.net/ash06229/28224v2j/1/

＆＃13;

body {
  margin: 0;
}

body * {
  box-sizing: border-box;
}
.side-bar {
  height: 100vh;
  float: left;
}

.side-bar > .check-box-group {
  max-height: calc(100vh - 30px);
  overflow: auto;
}

.side-bar > button {
  height: 30px;
}

.content {
  float: left;
}

＆＃13;

<div class="side-bar">
  <div class="check-box-group">
    SIDEBAR
    <p><input type="checkbox"/>Item 1</p>
    <p><input type="checkbox"/>Item 2</p>
    <p><input type="checkbox"/>Item 3</p>
    <p><input type="checkbox"/>Item 4</p>
    <p><input type="checkbox"/>Item 5</p>
    <p><input type="checkbox"/>Item 6</p>
  </div>
  <button>GO!</button>
</div>
<div class="content">CONTENT</div>

＆＃13;

根据窗口高度固定位置的按钮

2 个答案: