在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题。 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致。左右自适应高度一致 Jquery 复制代码 代码如下: <div style="width:300px;"> <div id="Left" style="float:left;background-color:blue;">1<br/>3<br/>5<br/></div> <div id="Right" style="float:right;background-color:red;">2</div> </div> <script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <script type="text/javascript"> $(function(){ var heightLeft= $("#Left").height(); var heightRight= $("#Right").height(); if (heightLeft > heightRight) { $("#Right").height(heightLeft); } else { $("#Left").height(heightRight); } }) </script> DIV高度自适应屏幕 js 复制代码 代码如下: <div id="top" style="height="200px;"></div> <div id="box">dsafsafsafsafsafdsa</div> <script> window.onload=function (){ function auto_height() { //var h= document.documentElement.clientHeight-200; //var high = document.getElementById("box"); //high.style.height=h+"px"; document.getElementById("box").style.height=document.documentElement.clientHeight-200+"px"; } auto_height(); onresize=auto_height; } </script>
推荐阅读
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
复制代码 代码如下: <script> //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myid).focus();// 获取焦点 }else{ setFocus>>>详细阅读
本文标题:关于div自适应高度/左右高度自适应一致的js代码
地址:http://www.17bianji.com/kaifa2/JS/22560.html
1/2 1