Html 使嵌套div可在页面上滚动调整大小

我花了一些时间在这个问题上，但无法解决这个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>

div class=“moduleContentContainer”>
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssggggss
ssggggss
ssggggss]
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss
ssggggss

（1） 我希望dash_Board_Item Div的高度基于其内容的大小（在.quote_list_container Div中的内容）。因此，如果表中有一行，dash Board Item Div的高度应较小，否则应较高，具体取决于内容

（2） 当窗口调整大小时，根据需要在.quote_list_container div上显示一个滚动条

---

Ray

我试图解决您的问题，请参见示例。

.quote\u列表\u容器{
颜色：#6e6e；
字体系列：arial；
字体大小：14px；
溢出y：自动；
溢出x：隐藏；
/*位置：相对位置*/
最大高度：91%；
}
.仪表板项目{
右边距：20px；
显示：内联块；
边框样式：实心；
最大宽度：700px；
最小宽度：300px；
边框颜色：#999999；
边框宽度：1px；
/*盒影：0px 0px 1px rgb（109110）*/
/*浮动：左*/
左侧填充：10px；
右边填充：10px；
边缘底部：20px；
位置：相对位置；
身高：100%；
溢出：自动；
}
#仪表板容器{
位置：绝对位置；
身高：90%；
}
.moduleContentContainer{
宽度：100%；
}

ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssggggss

首先，您的HTML中有一个错误：

div class=“.quote\u list\u container”

您应该从类名中删除前导句点

其次，由于包含内容的元素嵌套在两个元素中，因此使用带有百分比值的

max height

可能会遇到问题。因为必须为父元素指定显式高度

因此，您可以使用来完成以下任务：

.quote\u列表\u容器{
溢出y：自动；
溢出x：隐藏；
最大高度：100vh；
}

规格来源：

vh单元
等于初始包含块高度的1%

---

值得注意的是，

vh

视口相对长度大于等于。

？谢谢。调整大小时滚动条可以正常工作。但是.dash_board_项目高度应设置为其内容，而不是页面高度。对于此解决方案，您可以将

最大高度：100%；

设置为

。dash board项目

并删除

高度：100%

如果您喜欢我的答案，您可以接受其他审核。