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

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:44 AM

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7712

Java教學

1640

CakePHP 教程

1395

Laravel 教程

1289

PHP教程

1232

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。