如何使頁面上的子div可以滾動調整大小？ css

Question

DEMO

我花了一些時間在此，但無法解決這個CSS問題。我有4個嵌套div s。最內層的孩子div擁有一排行。

HTML結構：

<div class="moduleContentContainer"> 
<div id="dash-board-container"> 
    <div class="dash-board-item"> 
     <div>pENDING QUOTES</div> 
     <div class=".quote_list_container"> 
      <table> 
       <thead> 
        <tr><th>Names</th></tr> 
       </thead> 
       <tbody> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssss</td></tr> 
        <tr><td>ssggggss</td></tr> 
        <tr><td>ssggggss</td></tr> 
        <tr><td>ssggggss</td></tr> 
        <tr><td>ssggggss</td></tr> 
        <tr><td>ssggggss</td></tr> 
        <tr><td>ssggggss</td></tr> 
        <tr><td>ssggggss</td></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

（1）我想dash_Board_Item股利有根據其內容（在.quote_list_container格「的內容）的大小，它的高度因此，如果有一排，在該表中，破折號板項div應在高度小和更高否則，取決於內容。

（2）當窗口調整大小，顯示在.quote_list_container div當滾動條回覆quired。

Answer 1

1）從主體元素與刪除默認保證金body { margin:0; }

2）設置高度：100％表，身體和HTML

3的家長的div）因爲你只需要在滾動條quote_list_container div，你需要知道標題的高度，然後你可以使用calc來設置quote_list_container div與最大高度：100％減去標題的高度

4）你有什麼看起來像一個錯字你在quote_list_container div上的標記，你用前面的點命名該類。你可能不是那個意思。

FIDDLE

body { 
 
    margin:0; 
 
} 
 
html, body, .moduleContentContainer { 
 
    height: 100%; 
 
} 
 
.title { 
 
    height: 30px; 
 
} 
 
#dash-board-container { 
 
    position: absolute; 
 
    height: 90%; 
 
} 
 
.dash-board-item { 
 
    height: 100%; 
 
    margin-right: 20px; 
 
    display: inline-block; 
 
    border-style: solid; 
 
    max-width: 700px; 
 
    min-width: 300px; 
 
    border-color: #999999; 
 
    border-width: 1px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    position: relative; 
 
} 
 
.quote_list_container { 
 
    max-height: calc(100% - 30px); 
 
    overflow: auto; 
 
    position: relative; 
 
}

<div class="moduleContentContainer"> 
 
    <div id="dash-board-container"> 
 
     <div class="dash-board-item"> 
 
      <div class="title">pENDING QUOTES</div> 
 
      <div class="quote_list_container"> 
 
       <table> 
 
        <thead> 
 
         <tr> 
 
          <th>Names</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
         <tr> 
 
          <td>ssggggss</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
       <table> 
 
        <script type="text/javascript"> 
 
         
 
        </script> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>