CSS实例教程:完善的肯定底部

日期:2021-03-15 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版


CSS的简易在于它易学,CSS的艰难在于找寻更好的处理计划方案。在CSS的全球里,好像沒有完善这类说法。因此,如今详细介绍的CSS肯定底部,只是现阶段本人见过的计划方案中较为完善的吧。
CSS的简易在于它易学,CSS的艰难在于找寻更好的处理计划方案。在CSS的全球里,好像沒有完善这类说法。因此,如今详细介绍的CSS肯定底部,只是现阶段本人见过的计划方案中较为完善的吧。
先说大家为何会应用到这个CSS底部合理布局处理计划方案:
作为1个网页页面时,假如网页页面內容非常少,不够于填充1屏的对话框地区,按一般的合理布局,就会出現下面照片中的模样(也便是底部內容并沒有坐落于对话框的底部,而留下了很多空白。

针对追未完善的设计方案师来讲,这是不美观大方的。在网上有1些处理计划方案,但会出現当更改对话框高宽比时,底部和文章正文重合的BUG。虽然沒有是多少人会有事不要紧的去更改对话框高宽比,但设计方案嘛,追求完美的便是至善至美。

下面是我寻找的1个较为完善的方式,来自海外的设计方案达人,纯CSS,能够完成: 当文章正文內容非常少时,底位置于对话框最下面。当更改对话框高宽比时,不容易出現重合难题。

乃至,造就该CSS的人还专业创立1个网站详细介绍这个CSS底部合理布局计划方案。不知道道他有木有去申请办理专利权:) 编码写法
HTML编码:
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
表明: 应用这个合理布局的前提条件,便是footer要在总的div器皿以外,footer应用1个层,其它全部內容应用1个总的层。假如的确必须到加上其它同级层,那这个同级层就务必应用position:absolute开展肯定精准定位。
CSS编码:
下面是关键的CSS编码,让你的底部能够坐落于对话框的最下面:
html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* 务必应用和footer同样的高宽比 */ #footer {position: relative; margin-top: ⑴50px; /* footer高宽比的负值 */ height: 150px; clear:both;}
表明: 必须留意的便是#main的padding值、footer的高宽比和负margin值,必须维持1致。
便是这么简易,但是还没完。假如你的行为主体是应用飘浮合理布局,还得处理1些访问器的适配难题,这里应用的关键是以便Goolge Chrome。
对#main部分开展知名的Clearfix Hack:
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */
注: 该计划方案检测于两栏飘浮合理布局,适配各大流行访问器,包含Google Chrome。
P.S: 互联网上以前较为著名的footer合理布局有Ryan Faits造就的,但是它的方式在HTML编码中会有1个空的div层。严苛来讲,是不符词义网编码规范的。 此外,也有1篇Exploring Footers article from A List Apart,但应用了1些JavaScript编码。 这样1较为,上面看似简易的纯CSS,就显得杰出很多了。
OK, 沒有了。假如没看懂,实际的应用方式和表明能够到原站查询。
上一篇:案例方法学CSS text 返回下一篇:没有了