Question

正如您在此JSfiddle https://jsfiddle.net/m4qLqppd/中所看到的，每个＆＃34;部分的边界高度＆＃34;是不同的，并不涵盖整行。它被设置为特定的高度，而不是父级的高度。

无论如何，我可以将它始终作为父行的高度＆＃34; info＆＃34;没有设定固定高度？我不想要固定的高度，因为父母的身高会有所不同。

我尝试将每个部分的高度设置为

height: 100%

但这不行。

Answer 1

请参阅此fiddle

要使%高度起作用，您必须在%中设置所有父元素的高度，即您必须指定html和{的高度{1}}中也{1}}。因此，在您的代码中，您必须在CSS中将body添加到%。

更新的CSS如下

height:100%

<强>更新

查看更新后的fiddle，其中所有孩子都占据了父级的全高。在更新后的小提琴中，我为所有父元素添加了一个名为html,body的类，其高度为html,body{ height:100%; }。

Answer 2

Bootstrap柱仅占用必要的高度，它们不会伸展100％。还有另一种选择：删除bootstrap类并使用flexbox属性css。它更具原生性，适用于响应式设计：

试试这个结构：

html：

<div class=" info">   

   <div class="part">      
        <h6>Address</h6>      
        <p>100001 East village road, London UK</p> 
    <p>100202 West village road, London UK</p> 
    </div>  

   <div class="part">     
         <h3>1</h3>    
     </div>    



            <div class="part ">          
                <h6>Number</h6>         
                <p>1</p>        
        </div>

            <div class="part ">          
                <h6>Name</h6>          
                <p>John Marie Ann Frank Jacob</p>       
            </div>      

    </div>    


</div>

css：

.info {
    border: 1px solid black;
    width:100%;
    height: 100%;

    display: flex;

}

.info .part {
    position:relative;
    min-height: 100%;
    overflow: hidden;
    padding-top: 10px;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    border: 1px solid black;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

证明：https://jsfiddle.net/w5dq0r3k/

希望这有帮助

Answer 3

这看起来像HTML表的一个很好的用例。看来内容实际上是表格数据。通过使用HTML表格，可以创建您正在寻找的视觉设计。

HTML

<table border="1">
    <thead>
        <tr>
            <th>Address</th>
            <th>Info</th>
            <th>Number</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>100001 East village road, London UK</td>
            <td>lorem ipsum</td>
            <td>one</td>
            <td>John, Marie, Ann, Frank, Jacob</td>
        </tr>
        <tr>
            <td>2301 West village St, London UK</td>
            <td>lorem ipsum</td>
            <td>two</td>
            <td>Harry</td>
        </tr>
        <tr>
            <td>345 Endon Rendon, London UK</td>
            <td>lorem ipsum</td>
            <td>three</td>
            <td>Bill</td>
        </tr>
    </tbody>
</table>

如何将子div边框设置为父div高度

3 个答案:

请参阅此fiddle

HTML