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

Question

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

我的问题是滚动条出现得太晚了，这是因为标题。我花了好几个小时来思考，但我无法让它发挥作用。我昨天发布了类似的问题，只是没有那个标题 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.

当我删除标题 div 时，一切正常。

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

Answer 1

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