标签:
<!doctype html> <html style="height:50%; background-color:#9F0"> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:100%; "> <div style="height:100%; background-color:#FFF" > html的高度设置成小于浏览器窗口高度,但是仍然填充满整个浏览器窗口,但是其子元素的高度设置成百分比时,会按照父元素设置的高度值来计算比例。 </div> </body> </html>
<!doctype html> <html style="height:50%; "> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:100%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > body的高度设置成小于浏览器窗口高度,但是仍然填充满整个浏览器窗口,但是其子元素的高度设置成百分比时,会按照父元素设置的高度值来计算比例。 </div> </body> </html>
<!doctype html> <html style="height:150%; "> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:100%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > html的高度设置成大于浏览器窗口高度,会出现滚动条。 </div> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:50%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > 由于html没有设置高度,在body上面设置height:50%,未达到预期效果 </div> </body> </html>
<!doctype html> <html style=" height:100%"> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body style="height:50%; background-color:#9F0"> <div style="height:100%; background-color:#FFF" > 由于html没有设置高度,在body上面设置height:50%,未达到预期效果 </div> </body> </html>
标签:
原文地址:http://www.cnblogs.com/lion88/p/4203240.html