Maison > Article > interface Web > CSS+DIV 的宽度和高度的自适应问题_html/css_WEB-ITnose
CSS+DIV 的宽度和高度的自适应问题_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:44:22826parcourir
CSS HTML 布局 相对定位
除了body以外，最外层的width:80%和height:80%都设置了百分比为什么没有占屏幕的80%呢？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"> .div1{ width:80%; height:80%; background:blue; border:1px solid black; } .test{ width:80%; height:80%; background:red; border:1px solid yellow; } </style><title>流体定位布局2</title></head><body><div class="div1"> this is a test <div class="test"> this is a second test </div> aaaa </div></body></html> 于是，我试着进行修改，如果把width:80%修改成width:500px;相应的比例就可以生效。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"> .div1{ width:80%; height:500px; background:blue; border:1px solid black; } .test{ width:80%; height:80%; background:red; border:1px solid yellow; } </style><title>流体定位布局2</title></head><body><div class="div1"> this is a test <div class="test"> this is a second test </div> aaaa </div></body></html> 但是，如果只修改height:80%修改为height:500px;仍然不能占到相应的比例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css"> .div1{ width:500px; height:80%; background:blue; border:1px solid black; } .test{ width:80%; height:80%; background:red; border:1px solid yellow; } </style><title>流体定位布局2</title></head><body><div class="div1"> this is a test <div class="test"> this is a second test </div> aaaa </div></body></html> 有木有大神，能够解释下，谢啦~
回复讨论(解决方案)
可能原因：
1.没有给body定义宽度和高度，无法得到是谁的80%.
2.非标准html不识别百分比，标准的是xhtml.
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：div+css小疑问。_html/css_WEB-ITnose