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

概述我有这个代码： HTML： <div class="tile"> <h3>short</h3> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua 我有这个代码：

HTML：

<div >    <h3>short</h3>    <div >Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incIDIDunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupIDatat nonproIDent,sunt in culpa qui officia deserunt mollit anim ID est laborum.</div></div><div >    <h3>longLongLong longLongLong longLongLong</h3>    <div >Lorem ipsum dolor sit amet,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。

可以解决吗

解决方法 根据浏览器支持，您可以使用flex。

容器需要：

display: flex;flex-flow: column;

以下是一个使用示例标记的快速演示：

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

总结

以上是内存溢出为你收集整理的html – 使div扩展占用父容器的可用高度全部内容，希望文章能够帮你解决html – 使div扩展占用父容器的可用高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。