怎么实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度 _HTML/CSS

如何实现：上面的div根据内容自动高度，下面的div自动铺满剩余高度
有没有纯粹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等。