Maison > Article > interface Web > 【求教】请问，如何用css3实现div自适应高度？_html/css_WEB-ITnose
【求教】请问，如何用css3实现div自适应高度？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:50:321140parcourir
页面的结构非常简单
<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一直贴在底部
可以将footer {
position:fix;
bottom: 0
}
将footer一直贴在底部
谢谢您。
不过，这种办法的话，
一则好像会出现竖向滚动条，
二则，一旦content中内容多了……，
如果我没体会错，您是这个意思：
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .header { height: 100px; } .footer { position: fixed; bottom: 0; } </style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html> 我原本是这么搞的:
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .header { height: 100px; } .footer { height: 100px; } .content { height: 100%; } </style><body><div class="header">This is header</div><div class="content">This is content</div><div class="footer">This is footer</div></body></html> 结果，出现竖向滚动条了，footer直接被conter挤出画面了。
求指点。
<html><head></head><body><div class="header"></div><div class="content"></div><div class="footer"></div></body></html>
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是动态引入的，可能会有不同的高度。
display:box;
box-flex:
谢谢提醒。
<html> <head> <title>自适应高度测试</title> </head> <style> html body { height: 100%; } .wrap { height: 100%; display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; } .header { height: 100px; } .footer { height: 100px; } .content { /*height: 100%;*/ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } </style><body> <div class="wrap"> <div class="header">This is header</div> <div class="content">This is content</div> <div class="footer">This is footer</div> </div></body></html> 两个小问题：
一个问题是请您帮忙看一下代码哪还有问题，我用三个浏览器都看到出现了垂直滚动条。
另外一个问题就是这个属性好像还没有被正式支持吧？
真的不喜欢用每个浏览器的私有属性定义写CSS。
.content{ height:auto; min-height:600px;}
请问，这个600px，是假设当前最小的显示器为“1024*768”吗？
还是由何而来，使用600这个设置呢。
我在1920*1200的显示器上看页面，footer还是浮在页面中间了。
.content{ height:auto; min-height:600px;}
请问，这个600px，是假设当前最小的显示器为“1024*768”吗？
还是由何而来，使用600这个设置呢。
我在1920*1200的显示器上看页面，footer还是浮在页面中间了。
那就把这个600设大点喽，要想自适应各种分辨率，得用到js了，网上找一找吧。
display:box;
box-flex:
啊哈，8楼所说滚动条的问题解决了。
呵呵，真是不好意思，太久不弄CSS，特以的糊涂了。
那么，另外的问题就是，这个属性，IE能支持吗？
.content{ height:auto; min-height:600px;}
请问，这个600px，是假设当前最小的显示器为“1024*768”吗？
还是由何而来，使用600这个设置呢。
我在1920*1200的显示器上看页面，footer还是浮在页面中间了。
那就把这个600设大点喽，要想自适应各种分辨率，得用到js了，网上找一找吧。
这个倒是自己应该能写的出来，不过不想用JS来处理这个事情。
看看吧，如果没好办法，也只能JS了。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：前端开发利器CSS之完美容颜_html/css_WEB-ITnoseArticle suivant：easyui textarea IE8中无法换行_html/css_WEB-ITnose