快捷導(dǎo)航

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

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

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

在使用DIV和CSS進(jìn)行網(wǎng)頁布局中，DIV的自適應(yīng)高度和自適應(yīng)寬度是一個很常見的問題。
為了保證頁面的整體美觀性，需要將兩個或者多個層的高度/寬度保持一致。

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