html - 使嵌套的 div 在页面调整大小时可滚动

Question

demo

我在这上面花了一些时间，但无法解决这个 css 问题。我有 4 个嵌套的 div。最里面的子 div，包含一个行表。

HTML结构

 div class="moduleContentContainer">
 <div id="dash-board-container">
 <div class="dash-board-item">
     <div class=".quote_list_container">
         <table>
             <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>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>
               <tr><td>ssggggss</td></tr>

         <table>
     </div>
</div>

(1) 我希望 dash_Board_Item Div 的高度基于其内容的大小(.quote_list_container div 中的内容)。因此，如果表中只有一行，dash-board-item div高度应较小，否则应更高，具体取决于内容。

(2) 当窗口调整大小时，需要时在 .quote_list_container div 上显示滚动条。

雷

Answer 1

首先，您的 HTML 中有一个错误:div class=".quote_list_container" 您应该从类名中删除前导句点 .。

其次，由于包含内容的元素嵌套在几个元素中，使用带有百分比值的 max-height 可能会遇到麻烦。因为您必须为 parent 指定明确的高度。

因此，您可以使用 vh viewport percentage unit要做到这一点:

Example Here

.quote_list_container {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
}

规范来自 W3C :

vh unit
Equal to 1% of the height of the initial containing block.

值得注意的是vh视口(viewport)相对长度是supported in IE9及以上。