当前位置:主页 > 建站服务 >

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

网站前端制作

高度自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。1)元素高度自适应窗口高度设置方法:html,body{height:100%;}需要自适应的元素:height:100%;2)自适应元素高度:父元素:height:value;需要自适应父元素高度的子元素:height:100%;height:auto,是指根据块内内容自动调节高度。height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。3)浮动元素父元素高度自适应(高度塌陷)hack1:给父元素添加声明overflow:hidden;hack2:在浮动元素下方添加空div,并给该元素添加声明: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高度随浏览器窗口的高度自适应变化<divid="test"style="border:solid1px#f00;"></div><scripttype="text/javascript"><!--autodivheight();functionautodivheight(){//函数:获取尺寸//获取浏览器窗口高度varwinHeight=0;if(window.innerHeight)winHeight=window.innerHeight;elseif((document.body)&&(document.body.clientHeight))winHeight=document.body.clientHeight;//通过深入Document内部对body进行检测,获取浏览器窗口高度if(document.documentElement&&document.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=autodivheight;//浏览器窗口发生变化时同时变化DIV高度</script>左右div高度自适应htmlcode:<divid="container"><dividdivid="leftSide">这边的高度自适应右侧的高度</div><dividdivid="rightSide"><scripttypescripttype="text/javascript">for(i=0;i<10;i++){ document.write(i+'<br>'); } </script></div></div>可用的方法大概有以下四种: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; left:0;top:0;position:absolute;background:gray;} #rightSide{width:190px;float:right; text-align:center;background:purple;} 其实这种方法并没有真正的实现左右两个div等高,只是用了障眼法,利用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{ left.style.height=right.offsetHeight+'px'; } </script>方维网络不但支持网站整站定制,如果你们公司自己有设计师,也可以自己设计网页效果图,然后由我们来完成后面的前端制作和程序开发工作。作者:方维网络乐文庆