网站新闻

关于网站建设前端高度自适应解决方案

标签: | 作者:保定网络公司
 
&lt;div class= editor  id= editor &gt;&lt;p&gt;&lt;img alt= 网站前端制作  src= /uploads/allimg/180817/15453Va6-0.png &gt;&lt;/p&gt;</div>
 
 
 
高度自适应 
 
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。 
 
元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。 
 
 
 
1)元素高度自适应窗口高度 
 
设置方法:html,body{height:100%;} 
 
需要自适应的元素:&amp;nbsp;height:100%; 
 
 
 
2)自适应元素高度: 
 
父元素:height:value; 
 
&amp;nbsp;需要自适应父元素高度的子元素:&amp;nbsp;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;&amp;nbsp;} 
 
*visibility:hidden/visible;隐藏/可见 
 
*visibility:hidden;和display:none;的区别: 
 
visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而&amp;nbsp;display:none属性会使这个对象彻底消失。 
 
4)JS函数来实现DIV高度随浏览器窗口的高度自适应变化 
 
<div&amp;nbsp;id= test &amp;nbsp;style= &amp;nbsp;border:&amp;nbsp;solid&amp;nbsp;1px&amp;nbsp;#f00;&amp;nbsp; &amp;gt;</div>
 
<script&amp;nbsp;type= text/javascript>
 
<!-- 
 
autodivheight(); 
 
function&amp;nbsp;autodivheight(){&amp;nbsp;//函数:获取尺寸 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//获取浏览器窗口高度 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;var&amp;nbsp;winHeight=0; 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;if&amp;nbsp;(window.innerHeight) 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;winHeight&amp;nbsp;=&amp;nbsp;window.innerHeight; 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;else&amp;nbsp;if&amp;nbsp;((document.body)&amp;nbsp;&amp;amp;&amp;amp;&amp;nbsp;(document.body.clientHeight)) 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;winHeight&amp;nbsp;=&amp;nbsp;document.body.clientHeight; 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//通过深入Document内部对body进行检测,获取浏览器窗口高度 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;if&amp;nbsp;(document.documentElement&amp;nbsp;&amp;amp;&amp;amp;&amp;nbsp;document.documentElement.clientHeight) 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;winHeight&amp;nbsp;=&amp;nbsp;document.documentElement.clientHeight; 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//DIV高度为浏览器窗口的高度 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//document.getElementById( test ).style.height=&amp;nbsp;winHeight&amp;nbsp;+ px ; 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;//DIV高度为浏览器窗口高度的一半 
 
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;document.getElementById( test ).style.height=&amp;nbsp;winHeight/2&amp;nbsp;+ px ; 
 
 
window.onresize=autodivheight;&amp;nbsp;//浏览器窗口发生变化时同时变化DIV高度 
 
</script>
 
 
 
左右div高度自适应 
 
htmlcode: 
 
<div&amp;nbsp;id= container>
 
<dividdivid= leftSide &amp;gt;这边的高度自适应右侧的高度</div>
 
<dividdivid= rightSide>
 
<scripttypescripttype= text/javascript>
 
for(i=0;i<10;i++){  
 
document.write(i+&#39;<br&amp;gt;&#39;);  
 
}  
 
</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清除了左侧多余的部 分,以达到视觉上左右等高的目的,虽然有&ldquo;白猫黑猫,逮着老鼠就是好猫&rdquo;的说法,但是笔者并不着重推荐这种方法,因为给父级元素添加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脚本实现动态设置高度 
 
<script typescript type= text/javascript>
 
varleft=document.getElementById(&#39;leftSide&#39;);  
 
varright=document.getElementById(&#39;rightSide&#39;);  
 
if(left.offsetHeight&amp;gt;=right.offsetHeight){  
 
right.style.height=left.offsetHeight+&#39;px&#39;;  
 
}else{  
 
left.style.height=right.offsetHeight+&#39;px&#39;;  
 
}  
 
</script>
 
 
保定网站建设公司宜迅网络主营业务:企业网站建设、网站设计,网站推广优化、一物一码系统开发,分销系统开发,营销网站建设,企业邮箱申请、域名空间购买、网站备案、论坛网站建设和企业网站维护。网站建设服务热线:18330237987
相关新闻
网站建设推广公司 | 建站设计服务 | 网站建设宣传外包 | 服务范围 | 网站新闻 | 服务客户 | 关于宜迅
在线客服