Question

我花了一些时间在这上面，但无法解决这个问题。我有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可能会遇到麻烦。因为您必须为父母指定显式高度。

因此，您可以使用vh viewport percentage unit来实现这一目标：

<强> Example Here

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

来自W3C的规范：

vh单位
等于初始包含块高度的1％。

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

Answer 2

我尝试解决您的问题，请参阅示例。

＆＃13;

.quote_list_container {
color: #6e6e6e;
font-family: arial;
font-size: 14px;
overflow-y: auto;
overflow-x: hidden;
/* position: relative; */
max-height: 91%;
}

.dash-board-item {
margin-right: 20px;
display: inline-block;
border-style: solid;
max-width: 700px;
min-width: 300px;
border-color: #999999;
border-width: 1px;
/* box-shadow: 0px 0px 1px rgb(109,109,110); */
/* float: left; */
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
position: relative;
    height: 100%;
        overflow: auto;
    
}

#dash-board-container {
position: absolute;
height: 90%;
}

.moduleContentContainer {
width: 100%;
}

＆＃13;

<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>
                 
             <table>
         </div>
    </div>
</div>
</div>

＆＃13;

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

2 个答案: