网站前端制作之htmldiv高度自适应

　　高度自适应

　　网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。

　　元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

　　1)元素高度自适应窗口高度

　　设置方法：html，body{height：100%;}

　　需要自适应的元素：height：100%;

　　2)自适应元素高度：

　　父元素：height：value；

　　需要自适应父元素高度的子元素：height：100%;

　　height：auto，是指根据块内内容自动调节高度。

　　height：100%，是指其相对父块高度而定义的高度，也就是按照离它最近且有定义高度的父层的高度来定义高度。

　　3)浮动元素父元素高度自适应（高度塌陷）

　　hack1：给父元素添加声明overflow：hidden;

　　hack2：在浮动元素下方添加空p，并给该元素添加声明：clear：both;height：0;overflow：hidden;font-size：0;

　　hack3：万能清除浮动法

　　：after{content：.;display：block;height：0;visibility：hidden;clear：both;}

　　*visibility：hidden/visible;隐藏/可见

　　*visibility：hidden;和display：none;的区别：

　　visibility：hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而display：none属性会使这个对象彻底消失。

　　4)JS函数来实现DIV高度随浏览器窗口的高度自适应变化

　　pid=teststyle=border：solid1px#f00;/

　　scripttype=text/javascript

　　！--

　　autopheight();

　　functionautopheight(){//函数：获取尺寸

　　//获取浏览器窗口高度

　　varwinHeight=0;

　　if(window.innerHeight)

　　winHeight=window.innerHeight;

　　elseif((document.body)(document.body.clientHeight))

　　winHeight=document.body.clientHeight;

　　//通过深入Document内部对body进行检测，获取浏览器窗口高度

　　if(document.documentElementdocument.documentElement.clientHeight)

　　winHeight=document.documentElement.clientHeight;

　　//DIV高度为浏览器窗口的高度

　　//document.getElementById(test).style.height=winHeight+px;

　　//DIV高度为浏览器窗口高度的一半

　　document.getElementById(test).style.height=winHeight/2+px;

　　}

　　window.onresize=autopheight;//浏览器窗口发生变化时同时变化DIV高度

　　/script

　　左右p高度自适应

　　htmlcode：

　　pid=container

　　pidpid=leftSide这边的高度自适应右侧的高度/

　　pidpid=rightSide

　　scripttypescripttype=text/javascript

　　for(i=0;i10;i++){

　　document.write(i+'br');

　　}

　　/script

　　/

　　/

　　可用的方法大概有以下四种：

　　1，用absolute设置一个足够高的高度，在父级元素中清除溢出的部分，具体的csscode如下：

　　#container{font-size：14px;width：300px;overflow：hidden;

　　border：3pxsolidblue;margin：10pxauto0;

　　color：#fff;position：relative;}

　　#leftSide{width：100px;float：left;height：200000px;

　　#rightSide{width：190px;float：right;

　　text-align：center;background：purple;}

　　其实这种方法并没有真正的实现左右两个p等高，只是用了障眼法，利用container的overflow：hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有白猫黑猫，逮着老鼠就是好猫的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！

　　2，负外补丁和正内补丁{margin-bottom：-(num)px;padding-bottom：(num)px;}相结合

　　#container{font-size：14px;width：300px;overflow：hidden;

　　border：3pxsolidblue;margin：10pxauto0;color：#fff;}

　　#leftSide{width：100px;float：left;background：gray;

　　padding-bottom：9999px;margin-bottom：-9999px;}

　　#rightSide{width：190px;float：right;text-align：center;

　　background：purple;padding-bottom：9999px;

　　margin-bottom：-9999px;}

　　3，利用javascript脚本实现动态设置高度

　　scripttypescripttype=text/javascript

　　varleft=document.getElementById('leftSide');

　　varright=document.getElementById('rightSide');

　　if(left.offsetHeight=right.offsetHeight){

　　right.style.height=left.offsetHeight+'px';

　　}else{

　　}

　　/script

　　中企动力不但支持网站整站定制，如果你们公司自己有设计师，也可以自己设计网页效果图，然后由我们来完成后面的前端制作和程序开发工作。