【求教】请教，怎么用css3实现div自适应高度
【求教】请问，如何用css3实现div自适应高度？
页面的结构非常简单
其中，header和footer是根据某种条件动态选择引入的。换言之，header和footer的高度可能会变化。
遇到的问题是，当content中的内容很少的时候，div的高度会比较小，那么在比较大的屏幕上footer就会出现在很高的位置。
这个太难看了。
请问，怎么写css能够使得当屏幕比较大的时候，footer也出现在屏幕的底部，就像baidu首页那样的效果。
------解决思路----------------------
可以将footer {
position:fix;
bottom: 0
}
将footer一直贴在底部
------解决思路----------------------
------解决思路----------------------
display:box;
box-flex:
------解决思路----------------------
.content{ height:auto; min-height:600px;}
页面的结构非常简单
<html>
<head></head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
其中，header和footer是根据某种条件动态选择引入的。换言之，header和footer的高度可能会变化。
遇到的问题是，当content中的内容很少的时候，div的高度会比较小，那么在比较大的屏幕上footer就会出现在很高的位置。
这个太难看了。
请问，怎么写css能够使得当屏幕比较大的时候，footer也出现在屏幕的底部，就像baidu首页那样的效果。
------解决思路----------------------
可以将footer {
position:fix;
bottom: 0
}
将footer一直贴在底部
------解决思路----------------------
<html>
<head></head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
<style>*{margin:0;padding:0;}
html,body {
height: 100%;
}
.header {
height: 100px;background:#f00;
}
.footer {
height: 100px;background:#0f0;
}
.content {
height: calc(100% - 200px);background:#00f;
}
</style>
------解决思路----------------------
display:box;
box-flex:
------解决思路----------------------
.content{ height:auto; min-height:600px;}