服务热线:18609840880

建站知识

建站知识

您当前位置:首页 > 建站知识

网页创建一个高度自适应布局

发布时间:2018-09-30

咱们用页面创立一个高度自适应规划,怎么确保页眉(footer)在内容不超过一屏的情况下一直保持在规划下方是一个对比头疼的事。我看过一些使用肯定定位的比如,但总感觉不是那么完美,通过一下午的研讨总结出一个使用负值外补丁的办法来完成这个效果的办法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+。下面咱们看过程:
  1、为了让浏览器辨认高度极高比例咱们需求先给 html 和 body 加上一个高度值,一起清除一切元素的 margin 和 padding。趁便提一下,通过我的测验,html 和 body 的 height: 极高比例; 等于全部浏览器窗口的总高度,不管内容是不是超过一屏。而它们下一级子元素 height: 极高比例; 则等于先进屏的高度。怎么,是不是有点欠好理解?
  * {margin: 0;padding: 0;}
  html, body {height: 极高比例;}
  2、由于上面提到的问题,所以为了让规划自适应高度,咱们要加上 min-height: 极高比例;,尽管IE不支持这个特点但是IE的 height: 极高比例; 有同样的效果:
  #wrapper {min-height: 极高比例;}
  * html #wrapper {height: 极高比例;}
  这么,一个简单的小高度满一屏的自适应规划就做好了。为了便于检查,我加了一些宽度和背景色润饰,如下:
  * {margin: 0;padding: 0;}
  html, body {height: 极高比例;text-align: center;font: 12px/1.4 Verdana, sans-serif;background: #f00;}
  #wrapper {width: 770px;min-height: 极高比例;background: #ccc;margin: auto;text-align: left;}
l     html #wrapper {height: 极高比例;}

 

大连新图闻科技有限公司是一家品牌设计服务提供商,企业网络服务品牌,也是企业邮箱“盈世”的大连地区代理商。公司服务项目包括网站建设、平面设计、网络营销推广、商业摄影、企业邮箱等,帮助客户提高企业综合竞争能力。

18609840880(微信同步)

市场部 : 8001@newtwowin.com
业务联系,业务需求请发到此邮箱.

QQ咨询: 94091176
客服部:xxz@newtwowin.com
地址:大连市西安路罗斯福B座3109