网页宽度自适应
方法一:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=”text/css”> html body { height:height:100%; </style>
方法二:
<script type="text/javascript"> function resizeDiv(minusWidth, minusHeight)//减去宽度,减去高度 { var tb =document.getElementById ("wrapper");//这里是刚刚定义的div的ID var ieWidth = parseInt(document.body.clientWidth.toString().replace("px", ""), 10) - minusWidth;//iewidth:即高度;parseint:解析国际;document:文件; //clientWidth:客户端宽度;toString:转换为字符串;replace:代替; var tbWidth = parseInt(tb.style.width.toString().replace("px", ""), 10); if (ieWidth != tbWidth) tb.style.width = ieWidth + "px"; var ieHeight = parseInt(document.body.clientHeight.toString().replace("px", ""), 10) - minusHeight; var tbHeight = parseInt(tb.style.height.toString().replace("px", ""), 10); if (ieHeight != tbHeight) tb.style.height = ieHeight + "px"; setInterval("resizeDiv(20,40);", 100); //setInterval:设置间隔; resizeDiv:调整大小的div; } </script> <script> function setContentHeight(argument) { document.getElementsByClassName('wrapper')[0].style.height = window.outerHeight+'px'; } window.onload = setContentHeight; window.onresize = setContentHeight; </script>
方法三:
<script type="text/javascript"> window.onload = windowHeight; //页面载入完毕执行函数 function windowHeight() { var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度 var bodyHeight = document.getElementById("wrapper"); //寻找ID为content的对象 bodyHeight.style.height = (h - 25) + "px"; //你想要自适应高度的对象 } setInterval(windowHeight, 500)//每半秒执行一次windowHeight函数 </script>
欢迎访问每天进步网:https://meitianjinbu.cn/