Posted in Javascript onMarch 22, 2013
在使用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>
关于div自适应高度/左右高度自适应一致的js代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@