使div展开以占用父容器的可用高度 [英] Make div expand to occupy available height of parent container

问题描述

我有这个代码：

html：

  ; div class =tile> 
< h3>短< / h3> 
< div class =content> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod 
 tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse 
 cillum dolore eu fugiat nulla pariatur。 Exceptive sint occaecat cupidatat non 
 proident，sunt in culpa qui officia deserunt mollit anim id est laborum。< / div> 
< / div> 
 
< div class =tile> 
< h3> long Long long long Long long long long long< / h3> 
< div class =content> Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod 
 tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam，
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
 consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse 
 cillum dolore eu fugiat nulla pariatur。 Exceptive sint occaecat cupidatat non 
 proident，sunt in culpa qui officia deserunt mollit anim id est laborum。< / div> 
< / div> 
  

css：

 code> .tile {
 height：300px; 
 width：200px; 
 background：#cecece; 
 float：left; 
 margin：0 10px 0 0; 
} 
 
 .tile h3 {
 min-height：20px; 
 max-height：61px; 
 display：inline-block; 
 overflow：hidden; 
} 
 
 .tile .content {
 height：162px; 
 overflow：hidden; 
 margin：0 10px; 
} 
  

fiddle ：

这样可以解决吗？

解决方案

根据浏览器支持， flex 。

容器需要：

  display：flex; 
 flex-flow：column; 
  

这是一个有示例标记的快速演示：

http://jsbin.com/xuwina/3/edit?html,css,output

I have this code:

html:

<div class="tile">
    <h3>short</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div class="tile">
    <h3>longLongLong longLongLong longLongLong</h3>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

css:

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
}

.tile h3{
    min-height: 20px;
    max-height: 61px;
    display: inline-block;
    overflow: hidden;
}

.tile .content{
    height: 162px;
    overflow: hidden;
    margin: 0 10px;
}

fiddle:

http://jsfiddle.net/v8Lhxk2v/

and I get this layout

but I need to get something like next image, without using js.

Can that be solved?

解决方案

Depending on browser support you can use flex.

The container would need:

display: flex;
flex-flow: column;

Here's a quick demo with example markup:

http://jsbin.com/xuwina/3/edit?html,css,output

这篇关于使div展开以占用父容器的可用高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！