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);时，它的工作正常。

内部div上的滚动条，高度为100％

1 个答案: