css - 在子div中获取垂直滚动条时遇到问题

我想要也不能让滚动条出现在box-content div中。添加“ overflow-y：auto”无效。

我的要求：


整个布局必须调整为浏览器高度。这就是为什么我
有#wrap {...高度：50vh; ...}
滚动条不得包含
标头。它只能应用于box-content div。我希望标题的高度调整为内容，并在必要时将它们包装起来。


这是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>

这是小提琴的链接：https://jsfiddle.net/mjvancouver905/5vswprfw/

谢谢。

最佳答案

您可以使用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>

关于css - 在子div中获取垂直滚动条时遇到问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43054437/