css div height设置为100%，想设置padding怎么办，内部是一个图片，也需要100%，不能出现滚动条，怎么办？
0
最佳答案
0
可以将你的div的box-sizing设置为content-box;或者是border-box
收获园豆：7
怎么弄，麻烦给个demo，谢谢！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>height100%</title> <style> .container{ background-color:purple; height: 120px; } .inner{ height:100%; padding:10px; box-sizing:border-box; background-color: #fef; } img{ height:100%; } </style> </head> <body> <div class="container"> <div class="inner"> <img src="vote-bg@2x.png" alt="this is a test png"> </div> </div> </body> </html>
@木公2014: 多谢，css3还有这功能，看来css3确实完美了。
其他回答(3)
0
你这让浏览器怎么给你算啊，外框要100%，内容也是100%，中间还得留个空。要不在内容上再加个DIV吧。
收获园豆：1
内容一般都会超过屏幕宽度和高度，这个div一定要自适应，呈现一个可能最大的窗口（所以要自适应），而且要出滚动条的。
@沧海一杰: 那你DIV不要设置高，设置min-height=像素值，这样没内容或者内容没一屏高自动是一屏，内容超过它会自己变的。
@happydaily: 这个方案貌似不行的哦
@沧海一杰: <html>
<body>
<div style="border:solid 1px black;padding:5px;min-height:500px;">
<img style="height:600px;" />
</div>
</body>
</html>
0
好为难哦！
收获园豆：1
要是silverlight或wpf,这个问题一个*就解决了，css发展这么多年，我总感觉设计这个人的太垃圾了。
@沧海一杰: 是你的要求比较苛刻哦。
0
<!DOCTYPE html> <html lang="en"> <head> <title>test</title> <style type="text/css"> .main { position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; padding: 50px; background-color: #FF0000; } .imgArea { height: 100%; background-color: #00FF00; } </style> </head> <body> <div class="main"> <div class="imgArea"> </div> </div> </body> </html>
收获园豆：1