使div扩展以占用父容器的可用高度

Question

我有这个代码:

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;
}

小提琴:

http://jsfiddle.net/v8Lhxk2v/

我得到了这个布局

但我需要得到类似下一张图像的东西,而不使用js.

可以解决吗？

Answer 1

根据您可以使用的浏览器支持flex.

容器需要:

display: flex;
flex-flow: column;

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

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

Answer 2

看这个

http://jsfiddle.net/v8Lhxk2v/4/

border-bottom和overflow:hidden父元素一起玩.

.tile{
    height: 300px;
    width: 200px;
    background: #cecece;
    float: left;
    margin: 0 10px 0 0;
    border-bottom: 22px solid #cecece;
    overflow: hidden;
}

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

.tile .content{
    margin: 0 10px;
}

Answer 3

我想说尝试将内容绝对定位到磁贴的底部.在这种情况下,您可以设置内容应该结束的空间.仍然需要为您的内容添加一个额外的类,较小的标题要比具有较大标题的另一个标题大.

你的HTML将是:

<div class="tile">
    <h3>short</h3>
    <!-- Added an extra class to the div -->
    <div class="content small">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 .content{
    height: 162px;
    background-color:grey;
    overflow: hidden;
    margin: 0 10px;
    position: absolute;
    bottom:30px;
}
.tile .small{height:216px;}

然后你得到这个结果:JSFIDDLE

如果这是一个适合您的解决方案,请告诉我.

Answer 4

使用flexbox解决这个问题非常简单.

通过创建列flex容器,flex项目垂直堆叠.然后,您可以应用于flex: 1文本框(.content),使其扩展容器的完整可用高度.

HTML

<div id="container"><!-- container to align .tile boxes in flexbox row; 
                         (this flexbox is optional) -->
    <div class="tile">
        <h3>short</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

    <div class="tile">
        <h3>longLongLong longLongLong longLongLong</h3>
        <div class="content">Lorem ipsum dolor sit amet ... </div>
    </div>

</div><!-- end #container -->

CSS

#container {
    display: flex; /* establish flex container; 
                      aligns flex items (child elements) in a row by default; */        
}   

.tile {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* override default row alignment */
    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 {
    flex: 1; /* tells flex item to use all available vertical space in container */
    height: 162px;
    overflow: hidden;
    margin: 0 10px 40px 10px; /* added bottom margin for spacing from container edge */
}

DEMO

请注意,除IE 8和9外,所有主流浏览器都支持flexbox .最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加所需的所有前缀,请使用Autoprefixer.在更多的浏览器兼容性细节这个答案.

使用省略号(...)

如果要将省略号应用于单行文本,CSS使该text-overflow属性更容易.它仍然有点棘手(由于所有要求),但text-overflow使其成为可能和可靠.

但是,如果你想在多行文本上使用省略号 - 就像这里的情况那样 - 那么不要期望有任何乐趣.CSS没有提供单一属性来执行此操作,并且解决方法是命中和未命中.有关详细信息和方法,请参阅我的答案:将省略号应用于多行文本