有时候我们想div 100%的高度。比小心使用了min-height:100%.但是这样回带来一个问题。
当父高度也是min-height:100%时，子min-height:100%，不再是100%.只有父高度是height:100%,子min-height才是100%.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>ppt</title> 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 7 <style type="text/css"> 8 html, body { 9 height: 100%; 10 width: 100%; 11 margin: 0; 12 padding: 0; 13 } 14 #a { 15 min-width: 100%; 16 min-height: 100%; 17 } 18 #b { 19 min-height: 100%; 20 min-width: 100%; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="a"> 26 <div id="b"> 27 测试 28 </div> 29 </div> 30 </body> 31 </html>
结果是a 是满屏，b不是。
改成这样：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>ppt</title> 6 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 7 <style type="text/css"> 8 html, body { 9 height: 100%; 10 width: 100%; 11 margin: 0; 12 padding: 0; 13 } 14 #a { 15 width: 100%; 16 height: 100%; 17 } 18 #b { 19 min-height: 100%; 20 min-width: 100%; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="a"> 26 <div id="b"> 27 测试 28 </div> 29 </div> 30 </body> 31 </html>
结果 a,b都满屏。
如果不是设置100%,而是设置像素的话，没问题。所以这个min-height还是少用为好。