如何使页面上的子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>