使父div垂直滚动而不更改子div高度

时间：2016-08-24 05:19:59

标签： html css

我有一个使用div创建的HTML表。

HTML代码：

<div class = "content-table">
   <div class = "table-row table-row1">
       <div class = "left-align column1">&nbsp;</div>
       <div class = "left-align column2">Header</div>
       <div class = "left-align column3">
           <span><strong>Order Activities</strong></span><br/>
           <table style="width:100%">
              <tr>
                 <th>ACT NO</th>
                 <th>TYPE</th> 
                 <th>STATUS</th>
                 <th>REQUIRED-BY</th>
              </tr>
              <tr>
                 <td>01</td>
                 <td>D1PR01AG<br/> PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</td> 
                 <td><br/>ACT</td>
                 <td><br/>15/06/16 17:00</td>
              </tr>
              <tr>
                 <td>08</td>
                 <td>Jackson</td> 
                 <td>ACT</td>
                 <td>20/06/16 17:00</td>
              </tr>
           </table>
       </div>
   </div>
   <div class = "table-row table-row2">
       <div class = "left-align column1">&nbsp;</div>
       <div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
       <div class = "left-align column3">
           <span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
           <table style="width:100%">
               <tr>
                   <td>ACT</td>
                   <td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td> 
                   <td>JMENHDC</td>
                   <td>20/06/16 17:00</td>
               </tr>
           </table>
       </div>
   </div>
   <div class = "table-row table-row3">
       <div class = "left-align column1">03-03-2016<br/>03:36:13</div>
       <div class = "left-align column2">Image Signature<br/>Notes</div>
       <div class = "left-align column3">
           <span><strong>Engineer EIN:</strong>607614772</span><br/>
           <span><strong>NAME:</strong>Signed By: Atish</span><br/>
           <span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
           <span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
           <span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
        </div>
    </div>
    <div class = "table-row table-row2">
        <div class = "left-align column1">&nbsp;</div>
        <div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
        <div class = "left-align column3">
            <span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
            <table style="width:100%">
                <tr>
                    <td>ACT</td>
                    <td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td> 
                    <td>JMENHDC</td>
                    <td>20/06/16 17:00</td>
                </tr>
            </table>
        </div>
    </div>
    <div class = "table-row table-row3">
        <div class = "left-align column1">03-03-2016<br/>03:36:13</div>
        <div class = "left-align column2">Image Signature<br/>Notes</div>
        <div class = "left-align column3">
            <span><strong>Engineer EIN:</strong>607614772</span><br/>
            <span><strong>NAME:</strong>Signed By: Atish</span><br/>
            <span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
            <span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
            <span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
        </div>
    </div>
</div>

这里我的每个表格行都没有固定的高度。所以，现在我想让content-table类垂直滚动。

CSS 

.content-table
{
    overflow-y: scroll;
    height: 437px;
}

当我将上述样式添加到content-table类时，每个表行高度变为437px。我只想在不更改content-table高度的情况下使table-row类垂直滚动。

如何解决此问题？

编辑：表格行CSS 

.table-row
{
    width: 100%;
    height: 100%;
    display: inline-block;
    font-size: 13px;
}

3 个答案:

答案 0 :(得分：1)

只需在css中修改您的课程 .content-table 到表格行 如下

.table-row
{
    overflow-y: scroll;
    height: 437px;
}

答案 1 :(得分：1)

从height: 100%; css中删除.table-row。此属性导致内联块为其父级（内容表）的高度的100％。

＆＃13;
＆＃13; 
.table-row
{
    width: 100%;
    display: inline-block;
    font-size: 13px;
} 

.content-table
{
    overflow-y: scroll;
    height: 437px;
}
＆＃13; 
<div class = "content-table">
   <div class = "table-row table-row1">
       <div class = "left-align column1">&nbsp;</div>
       <div class = "left-align column2">Header</div>
       <div class = "left-align column3">
           <span><strong>Order Activities</strong></span><br/>
           <table style="width:100%">
              <tr>
                 <th>ACT NO</th>
                 <th>TYPE</th> 
                 <th>STATUS</th>
                 <th>REQUIRED-BY</th>
              </tr>
              <tr>
                 <td>01</td>
                 <td>D1PR01AG<br/> PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</td> 
                 <td><br/>ACT</td>
                 <td><br/>15/06/16 17:00</td>
              </tr>
              <tr>
                 <td>08</td>
                 <td>Jackson</td> 
                 <td>ACT</td>
                 <td>20/06/16 17:00</td>
              </tr>
           </table>
       </div>
   </div>
   <div class = "table-row table-row2">
       <div class = "left-align column1">&nbsp;</div>
       <div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
       <div class = "left-align column3">
           <span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
           <table style="width:100%">
               <tr>
                   <td>ACT</td>
                   <td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td> 
                   <td>JMENHDC</td>
                   <td>20/06/16 17:00</td>
               </tr>
           </table>
       </div>
   </div>
   <div class = "table-row table-row3">
       <div class = "left-align column1">03-03-2016<br/>03:36:13</div>
       <div class = "left-align column2">Image Signature<br/>Notes</div>
       <div class = "left-align column3">
           <span><strong>Engineer EIN:</strong>607614772</span><br/>
           <span><strong>NAME:</strong>Signed By: Atish</span><br/>
           <span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
           <span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
           <span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
        </div>
    </div>
    <div class = "table-row table-row2">
        <div class = "left-align column1">&nbsp;</div>
        <div class = "left-align column2"><strong>DAP</strong><br/>224466/1</div>
        <div class = "left-align column3">
            <span><strong>PHONEBOOKS (AUTOGEN) DO NOT COM/CAN MANUALLY</strong></span><br/><br/>
            <table style="width:100%">
                <tr>
                    <td>ACT</td>
                    <td>Action<br/> From table: JMINA Header: HC05C Instr: FIRST</td> 
                    <td>JMENHDC</td>
                    <td>20/06/16 17:00</td>
                </tr>
            </table>
        </div>
    </div>
    <div class = "table-row table-row3">
        <div class = "left-align column1">03-03-2016<br/>03:36:13</div>
        <div class = "left-align column2">Image Signature<br/>Notes</div>
        <div class = "left-align column3">
            <span><strong>Engineer EIN:</strong>607614772</span><br/>
            <span><strong>NAME:</strong>Signed By: Atish</span><br/>
            <span><strong>Are you able to capture customer survey and signature?:</strong>Yes </span><br/>
            <span><strong>Did the Openreach Engineer turn up when we said they would?: </strong>Yes</span><br/>
            <span><strong>Did they do the job needed ? (And if not, at least explain why they cpuldn't ?): </strong>Yes</span><br/>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

问题在于，当.content-table的高度设置为437px时，预计所有.table-row s＆＃39;高度全部扩展到437px，因为它们是height: 100%，告诉浏览器将其高度设置为.content-table的高度，尝试使用max-height: 437px代替.content-table

示例：https://jsfiddle.net/vxavj8cv/1/

编辑1 -

将overflow-y的{​​{1}}更改回.content-table https://jsfiddle.net/vxavj8cv/2/

相关问题
最新问题