關(guān)于div自適應(yīng)高度/左右高度自適應(yīng)一致的js代碼
更新時(shí)間:2013年03月22日 16:56:11 作者:
在DIV和CSS進(jìn)行網(wǎng)頁布局中,DIV的自適應(yīng)高度和自適應(yīng)寬度是一個(gè)很常見的問題,本文將介紹左右自適應(yīng)高度一致的Jquery與DIV高度自適應(yīng)屏幕的js
在使用DIV和CSS進(jìn)行網(wǎng)頁布局中,DIV的自適應(yīng)高度和自適應(yīng)寬度是一個(gè)很常見的問題。
為了保證頁面的整體美觀性,需要將兩個(gè)或者多個(gè)層的高度/寬度保持一致。
左右自適應(yīng)高度一致 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高度自適應(yīng)屏幕 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>
為了保證頁面的整體美觀性,需要將兩個(gè)或者多個(gè)層的高度/寬度保持一致。
左右自適應(yīng)高度一致 Jquery
復(fù)制代碼 代碼如下:
<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高度自適應(yīng)屏幕 js
復(fù)制代碼 代碼如下:
<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實(shí)現(xiàn)iframe自適應(yīng)高度的方法示例
- JS實(shí)現(xiàn)很實(shí)用的對聯(lián)廣告代碼(可自適應(yīng)高度)
- JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法
- js實(shí)現(xiàn)iframe自動(dòng)自適應(yīng)高度的方法
- 使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度
- js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
- 兼容主流瀏覽器的iframe自適應(yīng)高度js腳本
- JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
- Javascript 文本框textarea高度隨內(nèi)容自適應(yīng)增長收縮
- js實(shí)現(xiàn)的真正的iframe高度自適應(yīng)(兼容IE,FF,Opera)
- JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口示例
相關(guān)文章
微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab及scroll-left的使用
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)/點(diǎn)擊切換Tab,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04javascript實(shí)現(xiàn)字符串反轉(zhuǎn)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)字符串反轉(zhuǎn)的方法,實(shí)例分析了javascript實(shí)現(xiàn)字符串反轉(zhuǎn)的技巧,需要的朋友可以參考下2015-02-02用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果
用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果...2007-06-06JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法,涉及javascript動(dòng)態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04