在 Firefox 中,解决height=100%问题

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

我在使用 DIV 标签设计页面布局时遇到问题。 设计时,我希望柱高度为 100%。 我写了:

<divstyle="height:100%"></div>

它在 IE 中工作良好但在 Firefox 中失败。 我在论坛中做了很多研究,最后我成功地完成了。 现在我发布它希望能帮助你 !

背景

你应该熟悉 CSS。 请访问:http://www.w3c.orghttp://www.w3schools.com。

使用代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Untitled Document</title><styletype="text/css"><!--body, p, td, li, div, html{ font-family: arial, verdana, helvetica, monospace;color: #000080;font-size: small;height:100%;width:99%;}
#leftspace {float:left;text-align: center;width: 10%;height:100%;background-color:#006699;background-repeat:repeat-y;}
#container{float:left;text-align: center;width:78.56%;}
#rightspace {float:left;text-align: center;width: 10%;background-color:#006699;background-repeat:repeat-y;height:100%;}
#leftscroll {float:left;text-align: center;width: 7px;height:100%;/*background-image:url(images/home_bg05.gif);*/background-color:#ff0000;background-repeat:repeat-y;}
#rightscroll {float:left;text-align: center;width: 7px;height:100%;/*background-image:url(images/home_bg04.gif);*/background-color:#ff0000;background-repeat:repeat-y;}
#header {float: left;border: 1px solid #8690ab;text-align: center;height: 100px;width: 99.8%; 
}
#left {float:left;width: 20%;height: auto;border: 1px solid #8690ab; 
}
#middle {float:left;width: 59.49%;border: 0px solid #8690ab;height:auto;}
#right {float:left;width: 20%;height: auto;border: 1px solid #8690ab;}
#footer{float: left;border: 1px solid #8690ab;text-align: center;height: 60px;width: 99.8%; 
}
--></style></head><bodystyle="width:99.8%; border: 1px solid #ff0000"><divid="leftspace"></div><divid="leftscroll"></div><divid="container"><divid="header">This is the header section</div><divid="left">Category 1 <br/>Category 2 <br/>Category 3 <br/></div><divid="middle"><br/>

CSS论坛中经常提出的问题是如何创建垂直拉伸的页面,以填充浏览器窗口,而不考虑内容的数量。 使用表格,你可以将整个设计嵌套在 table 中,并将单元格的高度和高度设置为 100 %。 使用 CSS,它非常简单简单。 在本教程中,你将学习使页面填充浏览器窗口的基本CSS技术,你还可以随时使用 DIV

<br/></div><divid="right">Column 3 content </div><divid="footer"><br/>This is the footer section<br/>Mangrove CM, Vietnam </div></div><divid="rightscroll"></div><divid="rightspace"></div></body></html>

Firefox  高度  
相关文章