>  기사  >  웹 프론트엔드  >  CSS+DIV 的宽度和高度的自适应问题_html/css_WEB-ITnose

CSS+DIV 的宽度和高度的自适应问题_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-21 09:44:22826검색

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.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.