關于div自適應高度/左右高度自適應一致的js代碼
更新時間:2013年03月22日 16:56:11 作者:
在DIV和CSS進行網頁布局中,DIV的自適應高度和自適應寬度是一個很常見的問題,本文將介紹左右自適應高度一致的Jquery與DIV高度自適應屏幕的js
在使用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>
為了保證頁面的整體美觀性,需要將兩個或者多個層的高度/寬度保持一致。
左右自適應高度一致 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>
您可能感興趣的文章:
- JS實現(xiàn)iframe自適應高度的方法示例
- JS實現(xiàn)很實用的對聯(lián)廣告代碼(可自適應高度)
- JS實現(xiàn)自適應高度表單文本框的方法
- js實現(xiàn)iframe自動自適應高度的方法
- 使用javascript實現(xiàn)Iframe自適應高度
- js控制iframe的高度/寬度讓其自適應內容
- 兼容主流瀏覽器的iframe自適應高度js腳本
- JavaScript 處理Iframe自適應高度(同或不同域名下)
- Javascript 文本框textarea高度隨內容自適應增長收縮
- js實現(xiàn)的真正的iframe高度自適應(兼容IE,FF,Opera)
- JS實現(xiàn)DIV高度自適應窗口示例
相關文章
微信小程序實現(xiàn)滑動/點擊切換Tab及scroll-left的使用
這篇文章主要介紹了微信小程序實現(xiàn)滑動/點擊切換Tab,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04