来谈谈：CSS计划网页小技能:100%的高度

显示全部楼层 · 发表于 2015-1-15 23:20:21

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
网页制造poluoluo文章简介：在前端职员之间有一个广泛存在的成绩，怎样让一个div的高度主动延长到扫瞄窗口100%的高度。有一些分歧的办法能够完成，可是，我想出了一个我团体对照喜好的办法。明天，我将于你分享一下。
在前端职员之间有一个广泛存在的成绩，怎样让一个div的高度主动延长到扫瞄窗口100%的高度。有一些分歧的办法能够完成，可是，我想出了一个我团体对照喜好的办法。明天，我将于你分享一下。
我对你是不懂得的，但我试图弄分明怎样让我的结构垂直拉伸到页面的100％高度，如许一个令我懊丧的成绩。我想让div布局主动延长，可是它就是不克不及主动延长，如今，为何他不克不及如许那？明天我将与你一同分享这个办理办法。
例如说你有以下html代码文档

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"/><title>CSS100%Height</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><divid="content">Loremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.Utwisienimadminimveniam,quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquipexeacommodoconsequat.Duisautemveleumiriuredolorinhendreritinvulputatevelitessemolestieconsequat,velillumdoloreeufeugiatnullafacilisisatveroerosetaccumsanetiustoodiodignissimquiblanditpraesentluptatumzzrildelenitLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtinciduntutlaoreetdoloremagnaaliquameratvolutpat.</div></body></html>

复制代码

同时你有以下css款式文件

body{margin:0;padding:0;}#content{background:#EEE;border-left:1pxsolid#000;border-right:1pxsolid#000;padding:020px020px;margin:auto;font:1.5emarial,verdana,sans-serif;width:960px;height:100%;}

复制代码

这就给了你这个示例文件。正如你所看到的，页面的content容器不克不及主动延长到页面的全部高度。只管我们给css款式文件增加了”height:100%”。为何那？
让我给你别的一种体例来思索HTML，几近每个HTML文件都有一组容器相互包括的。因而，在我们的页面内里，起首我们有一个<html>容器，其次<body>容器包括在<html>里，最初才是<divid=”content”></div>容器包括在内里。当我们往任何一个容器内里安排内容的时分，这个容器和包括此容器的父容器盒子城市主动延长的，从而能容下这些新增加的内容。也就是说，当我们往<divid=”content”></div>容器盒子增加笔墨内容的时分，这个div容器盒子是主动延长的，包括这个div容器的父容器盒子（body与html）顺次是主动延长的。
当我们给<divid=”content”></div>容器界说“height:100%”款式时，我们如今做的就是告知它让其高度延长到包括它的父容器的全部高度。在这个例子里，这个div容器被包括在<body>容器内里，以是<divid=”content”></div>就是body的全部高度。好了，body容器是怎样延长增加的那？它就像<divid=”content”></div>的高度一样，由于我们历来没有告知它怎样增高的。以是当我们给<divid=”content”></div>界说“height：100%”款式的时分，我们仅仅告知了它本人。
办理此成绩，我必要告知<body>容器变的年夜一些儿，同时<html>容器也会呈现一样的成绩，它应当与<body>一样年夜。以是为懂得决这个成绩（让<divid=”content”></div>容器主动延长到全部页面的高度）我们必要告知<html>和<body>容器高度应为全部页面的高度。
假如我们修正我们的css文件，以下所示

html{min-height:100%;_height:100%;}body{margin:0;padding:0;min-height:100%;_height:100%;}#content{background:#EEE;border-left:1pxsolid#000;border-right:1pxsolid#000;padding:020px020px;margin:auto;font:1.5emarial,verdana,sans-serif;width:960px;min-height:100%;_height:100%;}

复制代码

就是如许，这里是我们如今的最后的效果。这个content容器如今已能主动延长到全部页面的高度了。
中文原文：小技能：css100%高度
英文原文：QuickTip：CSS100%Height
</p>
层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来谈谈：CSS计划网页小技能:100%的高度

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子