CSS+DIV 的宽度和高度的自适应问题_html/css

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

WBOY

Release： 2016-06-21 09:44:22

Original

877 people have browsed it

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>

Copy after login

于是，我试着进行修改，如果把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>

Copy after login

但是，如果只修改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>

Copy after login

有木有大神，能够解释下，谢啦~