JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口示例
本文實(shí)例講述了JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口。分享給大家供大家參考,具體如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> *. { margin: 0; padding: 0; } </style> <script type="text/javascript"> window.onload = windowHeight; //頁面載入完畢執(zhí)行函數(shù) function windowHeight() { var h = document.documentElement.clientHeight; //獲取當(dāng)前窗口可視操作區(qū)域高度 var bodyHeight = document.getElementById("divContent"); //尋找ID為content的對象 bodyHeight.style.height = (h - 25) + "px"; //你想要自適應(yīng)高度的對象 } setInterval(windowHeight, 500)//每半秒執(zhí)行一次windowHeight函數(shù) </script> </head> <body> <form id="form1" runat="server"> <div id="divContent" style="background-color: Gray;border:1px solid blue;">Test</div> </form> </body> </html>
PS:高度自適應(yīng)應(yīng)用廣泛,本站的很多在線工具也使用了這一技巧,列舉如下幾個(gè)工具供大家參考:
JavaScript在線格式化工具(基于beautify.js插件):
http://tools.jb51.net/code/js_beautify
在線顏色選擇器工具/RGB顏色查詢對照表:
http://tools.jb51.net/color/colorpicker
在線個(gè)人所得稅計(jì)算器:
http://tools.jb51.net/jisuanqi/tax_calc
宋詞在線查詢:
http://tools.jb51.net/bianmin/songci
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- 關(guān)于div自適應(yīng)高度/左右高度自適應(yīng)一致的js代碼
- 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)
相關(guān)文章
移動(dòng)端H5喚起APP的寫法實(shí)例(IOS、android)
最近在做掃碼之后的h5頁面喚醒App的功能,所以記錄一下,這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5喚起APP的相關(guān)資料,需要的朋友可以參考下2021-07-07Cpage.js給組件綁定事件的實(shí)現(xiàn)代碼
Cpage.js是一款輕量級的Mvvm框架,使用TypeScript(JavaScript的超集)開發(fā)。下面通過本文給大家分享Cpage.js給組件綁定事件的實(shí)現(xiàn)代碼,需要的的朋友參考下吧2017-08-08js如何調(diào)用qq互聯(lián)api實(shí)現(xiàn)第三方登錄
這篇文章主要介紹了js如何調(diào)用qq互聯(lián)api實(shí)現(xiàn)第三方登錄,需要的朋友可以參考下2014-03-03bootstrap校驗(yàn)laydate起止日期聯(lián)動(dòng)失效問題及解決方法
這篇文章主要介紹了bootstrap校驗(yàn)laydate起止日期聯(lián)動(dòng)失效問題,項(xiàng)目中用到bootstrapValidator,以及l(fā)aydate(by:賢心,插件效果美觀),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01JavaScript數(shù)組分組groupBy示例詳解
JavaScript?最近發(fā)布了一個(gè)方法?Object.groupBy,可以對可迭代對象中的元素進(jìn)行分組,這篇文章主要介紹了JavaScript數(shù)組分組groupBy示例,需要的朋友可以參考下2023-12-12使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對象
使用原生javascript創(chuàng)建通用表單驗(yàn)證——更鋒利的使用dom對象,學(xué)習(xí)js的朋友可以參考下。2011-09-09原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)$.param() 函數(shù)的方法,由于遇到相關(guān)序列化的問題,但是vue項(xiàng)目中由于減少隊(duì)jquery引用的限制,導(dǎo)致不能用$.param來序列化參數(shù),下面小編給大家分享了實(shí)例代碼,需要的朋友參考下吧2018-08-08