在 child div 中获取垂直滚动条时遇到问题

Question

我想要但不能让滚动条出现在 box-content div 中。添加 'overflow-y:auto' 不起作用。

我的要求：

整个布局必须适应浏览器高度。这就是为什么我有#wrap { ... 高度：50vh; ...}
滚动条不能包含 header。它必须仅适用于 box-content div。我想让 header 的高度适应内容并在必要时将它们包裹起来。

这是css

    #wrap { 
        margin: 10px;
        height: 50vh;
        border: 2px solid black;
    }

    .container {
        border: 4px solid red;
        padding: 4px 3px;
        margin: 0;
        max-height: 90%;        /* As a percentage of the parent. */ 
        /* height: 300px;       /* This causes the scroll bar to appear, but its not what I want. */
    }   

    .box-header {
        background-color: green;
        padding: 5px 10px;
        color: white;
    }

    .box-content {
        border: 3px solid blue;
        overflow:auto;
        padding: 5px;
        padding-top: 10px;
        max-height:100%;
    }

还有 HTML

<div id="wrap">
    <div class="container">
        <div class="box-header"> Header String</div>
        <div class="box-content">
             <p>line 1</p>
             <p>line 2</p>
             <p>line 3</p>
             <p>line 4</p>
             <p>line 5</p>
             <p>line 6</p>
             <p>line 7</p>
             <p>line 8</p>
             <p>line 9</p>
             <p>line 10</p>
             <p>line 11</p>
             <p>line 12</p>
             <p>line 13</p>
             <p>line 14</p>
             <p>line 15</p>          
             <p>line 16</p>
             <p>line 17</p>
             <p>line 18</p>
             <p>line 19</p>          
        </div>
     </div>
</div>

这里是 link 到 fiddle：https://jsfiddle.net/mjvancouver905/5vswprfw/

谢谢。

Answer 1

您应该添加一个合适的（固定的最大高度）例如：

.box-content {
  border: 3px solid blue;
  overflow: auto;
  padding: 5px;
  padding-top: 10px;
  max-height: 400px;
}

https://jsfiddle.net/motka53y/

Answer 2

我会这样做。首先你的容器应该有一个固定的宽度，这样任何溢出都可以被隐藏。所以你必须将 max-height : 90% 更改为 height: 90%。那么你必须添加属性 overflow-hidden 以便隐藏容器外的溢出部分。

这是一个有效的 fiddle ：https://jsfiddle.net/5vswprfw/12/

这是我在 css 样式中更改的内容：

  .container {
  padding: 4px 3px;
  margin: 0;
  height: 90%;
  overflow:hidden;
  }

Answer 3

您可以使用 flex 布局

#wrap {
  margin: 10px;
  border: 2px solid black;
}

.container {
  padding: 4px 3px;
  margin: 0;
  height: 50vh;
  /* As a percentage of the parent. */
  /* height: 300px;    /* This causes the scroll bar to appear, but can't be used because the height must adjust to the size of the screen. */
  display: flex;
  flex-direction: column;
}

.box-header {
  background-color: green;
  padding: 5px 10px;
  color: white;
}

.box-content {
  border: 3px solid blue;
  padding: 5px;
  padding-top: 10px;
  overflow-y: scroll;
}

<div id="wrap">
  <div class="container" style="border: 4px solid red">
    <div class="box-header"> Header in the B1 div.</div>
    <div class="box-content">
      <p>line 1</p>
      <p>line 2</p>
      <p>line 3</p>
      <p>line 4</p>
      <p>line 5</p>
      <p>line 6</p>
      <p>line 7</p>
      <p>line 8</p>
      <p>line 9</p>
      <p>line 10</p>
      <p>line 11</p>
      <p>line 12</p>
      <p>line 13</p>
      <p>line 14</p>
      <p>line 15</p>
      <p>line 16</p>
      <p>line 17</p>
      <p>line 18</p>
      <p>line 19</p>
    </div>
  </div>
</div>

在 child div 中获取垂直滚动条时遇到问题

Having trouble getting a vertical scroll bar in a child div

css

overflow