内部 div 高度为 100% 的滚动条

Question

我有一个侧边栏 header（只有几个标签）和一个内容表单。每当页面以表单内容不完全可见的方式缩小时，我希望在该表单上有滚动条。

我的问题是滚动条出现得太晚，这是因为 header。我花了好几个小时来思考，但我无法让它发挥作用。我昨天发布了类似的问题，只是没有那个 header div，它起作用了我只是无法在这种情况下起作用。

目前我的方法是：

html:

<div id="sidebar">
  <div id="tabheader">tab header...</div>
  <div id="formdiv">
    <form id="my-form" enctype="multipart/form-data" method="post">
      <label>Dropdown 1
        <select id="select1"></select>
      </label>
      <label>
        Dropdown 2
        <select id="select2"></select>
      </label>
      <label>
        Dropdown 3
        <select id="select3"></select>
      </label>
      <label>
        Dropdown 4
        <select id="select4"></select>
        <button class="btn btn-success btn-default">Submit</button>
    </form>
  </div>
</div>

css:

div#sidebar {
  position: fixed;
  width: 400px;
  top: 0px;
  bottom: 0px;
  border: 3px solid red;
}

div#tabheader {
  display: table;
  border: 3px solid #8AC007;
}

div#formdiv {
  border: 3px solid blue;
  width: 350px;
  height: 100%;
  overflow-y: auto;
}

select {
  width: 300px;
}

And JSFiddle.

当我删除 header div 时一切正常。

注意：根据我的需要侧边栏必须固定位置。如果有这样的解决方案，我会更喜欢不依赖于知道 header 高度的解决方案。

Answer 1

问题是您的 #formdiv 是 100% 高度，所以它变得比它的父级本身大。如果您知道 #tabheader 的高度，例如在 jsfiddle 中高度是 24px，那么当您将 #formdiv 的高度更改为 height: calc(100% - 24px); 时它工作正常。

内部 div 高度为 100% 的滚动条

scrollbar on inner div with height 100%

html

css

scrollbar