怎么实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度
日期：2014-05-17 浏览次数：20581 次
如何实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度
有没有纯粹div+css的方式实现上下两个div满足：上面的div根据内容自动高度，下面的div自动铺满剩余高度
------解决方案--------------------
CSS3中的弹性盒模型可以纯粹使用div+css实现你要的效果。如：
目前支持的浏览器有IE10和较新版本的FireFox、Chrome等。
有没有纯粹div+css的方式实现上下两个div满足：上面的div根据内容自动高度，下面的div自动铺满剩余高度
------解决方案--------------------
CSS3中的弹性盒模型可以纯粹使用div+css实现你要的效果。如：
<!doctype html>
<html>
<head>
<title>Temp Web Page</title>
<style type="text/css">
body *{border:1px solid}
#container{ width:200px; height:400px;
display: -moz-box;
display:-webkit-flex;
display: -ms-flexbox;
-moz-box-orient: vertical;
-webkit-flex-direction:column;
-ms-flex-direction:column;
}
#inner1{ background:#ddd; }
#inner2{ background:#aaa;
-moz-box-flex: 1;
-webkit-flex:1;
-ms-flex:1;
}
</style>
</head>
<body>
<div id="container">
<div id="inner1">
When you come to the end of a perfect day. It can only mean a tired heart, and the dear friends have to part.
</div>
<div id="inner2"></div>
</div>
</body>
</html>
目前支持的浏览器有IE10和较新版本的FireFox、Chrome等。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
