無法在子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; 
    }