關(guān)于div自適應(yīng)高度/左右高度自適應(yīng)一致的js代碼

更新時(shí)間：2013年03月22日 16:56:11 作者：

在DIV和CSS進(jìn)行網(wǎng)頁(yè)布局中，DIV的自適應(yīng)高度和自適應(yīng)寬度是一個(gè)很常見(jiàn)的問(wèn)題，本文將介紹左右自適應(yīng)高度一致的Jquery與DIV高度自適應(yīng)屏幕的js

在使用DIV和CSS進(jìn)行網(wǎng)頁(yè)布局中，DIV的自適應(yīng)高度和自適應(yīng)寬度是一個(gè)很常見(jiàn)的問(wèn)題。
為了保證頁(yè)面的整體美觀性，需要將兩個(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> 

您可能感興趣的文章:

相關(guān)文章

如何利用JS判斷整數(shù)x是否是回文數(shù)
回文數(shù)是指正序（從左向右）和倒序（從右向左）讀都是一樣的整數(shù),下面這篇文章主要給大家介紹了關(guān)于如何利用JS判斷整數(shù)x是否是回文數(shù)的相關(guān)資料,需要的朋友可以參考下
2022-01-01
html中通過(guò)JS獲取JSON數(shù)據(jù)并加載的方法
本篇內(nèi)容主要給大家講了如何通過(guò)javascript解析JSON并得到數(shù)據(jù)后添加到HTML中的方法，需要的朋友參考下。
2017-11-11
JS 調(diào)試中常見(jiàn)的報(bào)錯(cuò)問(wèn)題解決方法
下面小編就為大家?guī)?lái)一篇JS 調(diào)試中常見(jiàn)的報(bào)錯(cuò)問(wèn)題解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05
EXT中單擊button按鈕grid添加一行（光標(biāo)位置可設(shè)置)的實(shí)例代碼
這篇文章主要介紹了EXT中單擊button按鈕grid添加一行（光標(biāo)位置可設(shè)置)的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-06-06
JavaScript Split()方法
split()方法可以利用字符串的子字符串的作為分隔符將字符串分割為字符串?dāng)?shù)組，并返回此數(shù)組，本文給大家介紹javascript split 方法，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
RequireJS入門(mén)一之實(shí)現(xiàn)第一個(gè)例子
RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人。大家知道我們?yōu)槭裁匆獙W(xué)習(xí)requirejs嗎？帶著這個(gè)疑問(wèn)來(lái)學(xué)習(xí)本篇文章吧，感興趣的朋友一起學(xué)習(xí)RequireJS入門(mén)一之實(shí)現(xiàn)第一個(gè)例子吧
2015-09-09
詳解JavaScript運(yùn)算符中==和===的區(qū)別
在JavaScript中==運(yùn)算符和===運(yùn)算符是經(jīng)常遇到的，那么二者有哪些區(qū)別呢，本文就來(lái)和大家進(jìn)行簡(jiǎn)單的討論，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)學(xué)習(xí)
2023-05-05
js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法
今天小編就為大家分享一篇js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
JavaScript面試必備之垃圾回收機(jī)制和內(nèi)存泄漏詳解
垃圾回收機(jī)制和內(nèi)存泄漏是JavaScript面試時(shí)常常問(wèn)到的問(wèn)題，這篇文章就為大家詳細(xì)整理了他們的相關(guān)知識(shí)，感興趣的小伙伴可以跟隨小編一起了解一下
2023-05-05
小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)實(shí)現(xiàn)方法
這篇文章主要介紹了小程序顯示彈窗時(shí)禁止下層的內(nèi)容滾動(dòng)實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-03-03