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

高度自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
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>
创新互联不但支持网站整站定制，如果你们公司自己有设计师，也可以自己设计网页效果图，然后由我们来完成后面的前端制作和程序开发工作。

网页名称：网站前端制作之htmldiv高度自适应
网页URL：https://www.cdcxhl.com/news13/240163.html

成都网站建设公司_创新互联，为您提供移动网站建设、域名注册、网站导航、微信公众号、服务器托管、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联