无法在子div中获取垂直滚动条

Question

我想要并且无法获得滚动条以显示在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/

感谢。

Answer 1

您可以使用flex布局

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

 
.container { 
 
    padding: 4px 3px; 
 
    margin: 0; 
 
    height: 50vh; 
 
    /* As a percentage of the parent. */ 
 
    /* height: 300px; \t \t \t \t /* 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>

Answer 2

您应该添加适当的（固定MAX-heigth），例如：

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

https://jsfiddle.net/motka53y/

Answer 3

我会做这种方式。首先你的容器应该有一个固定的宽度，以便可以隐藏任何溢出。所以你必须改变最大高度：90％到高度：90％。那么你必须添加溢出隐藏属性，以便隐藏容器外溢出的部分。

这里的工作小提琴：https://jsfiddle.net/5vswprfw/12/

这是我在CSS样式改变：

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