1. 程式人生 > >如何讓一個元素自適應螢幕的高度

如何讓一個元素自適應螢幕的高度

               讓一個元素的高度和螢幕的高度一樣,並且隨著螢幕高度的變化而變化,用js程式碼實現;記得寫完呼叫這個函式;
        //====tree的自適應高度start=====================

            function autodivheight(){ //函式:獲取尺寸  


                //獲取瀏覽器視窗高度  
                var winHeight=0;
                if (window.innerHeight)
                    winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                    winHeight = document.body.clientHeight;
                //通過深入Document內部對body進行檢測,獲取瀏覽器視窗高度  
                if (document.documentElement && document.documentElement.clientHeight)
                    winHeight = document.documentElement.clientHeight;
                //DIV高度為瀏覽器視窗的高度  
                document.getElementById("tree").style.height= winHeight +"px";

                //當tree的高度超過螢幕高度的時候,設定滾動條
                $("#tree").height() < winHeight  ? $("#tree").height('auto') : $("#tree").css('overflow', 'auto').height(winHeight);

            }
        window.onresize=autodivheight; //瀏覽器視窗發生變化時同時變化DIV高度  

        //====tree的自適應高度end=======================
歡迎關注我的個人技術公眾號!javascript藝術

相關推薦

如何一個元素適應螢幕高度

               讓一個元素的高度和螢幕的高度一樣,並且隨著螢幕高度的變化而變化,用js程式碼實現;記得寫完呼叫這個函式; //====tree的自適應高度start==

怎麼Html的高度適應螢幕高度

在寫css靜態頁面的時候讓Html的高度自適應螢幕高度是一個常見的需求,比如你有一個需要置底的bottom按鈕,需要在內容不足一屏的時候顯示在螢幕的底部,在內容超過一屏的時候顯示在所有內容的底部。

div適應螢幕高度

問題描述:本地專案頁面左側選單點選父親節點拉伸出子節點後,演示的陰影不能覆蓋所有的左側選單,現象如下圖:此時整個演示的頁面要通過滾動條才能看到整個選單內容 整個選單都放在div中,div的父親節點為body,此時設定了height為100%,依然沒有效果 <div

如何iframe框架適應內容高度

<iframe src="edit-index.html" width="969" id="my_iframe" frameborder="no" marginwidth="0" marginheight="0" scrolling="no"></ifra

H5 佈局 -- 容器充滿螢幕高度適應剩餘高度

在前端頁面佈局中,經常會碰到要讓容器充滿整個螢幕高度或者剩餘螢幕高度的需求。一般這時候都會想當然的使用 height:100% 這樣的 CSS 來寫。這樣寫的話,當容器內內容很多的時候是沒有問題的,可以達到預期的效果,但是如果容器內內容比較少,不足以撐起足夠的高

怎麼div的高度適應螢幕高度

html,body{height:100%; width:100%; overflow:hidden; margin:0;padding:0;} body{height:100%; width:100%; overflow:hidden; margin:0;padding

【css】子元素浮動到了父元素外,父元素沒有隨子元素適應高度,如何解決?

正常情況 如果子元素沒有設定浮動(float),父元素的高度會隨著子元素高度的改變而改變的。 設定浮動以後 父元素的高度不會隨著子元素的高度而變化。 例如:在一個ul中定義若干個li,並設定float='left' <!DOCTYPE html> <html lang="en"&g

簡單實現一個textarea適應高度

textarea自適應的實現方法很多,原理其實比較簡單:監聽textarea的input或者鍵盤事件,獲取元素的scrollHeight,重置textarea元素的高度。 預覽地址:textarea 我們知道textarea有個rows的屬性,改變rows的值可以改變textarea的高度,至於怎麼改變不

如何網頁適應螢幕寬度

網頁自適應螢幕寬度到底是怎麼做到的? 1.首先,在網頁程式碼的頭部,加入一行viewport元標籤: viewport是網頁預設的寬度和高度,上面這行程式碼的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initi

div動態元素適應高度

<div class="tpsetbox" ng-repeat="item in items" > <div class="tpsettitbox"><span ng-bind="item.BuildName"

如何body及裡面的div、表格等自動適應螢幕高度

今天我做一個表格在頁面裡,想要這個表格自動適應螢幕的高度,把他的高度設為了100%,style="height:100%",但設了之後,表格顯示不出來,於是我想可能是body的高度還要設為100%吧,但設了之後還是沒變化。最後找了我們的專案發現,除了body要設為100%外,

關於適應螢幕,設定子元素浮動,父div不能包裹子div,子元素中內容溢位的問題。

設定HTML適應不同解析度的螢幕。 需求結構如下: HTML結構程式碼如下(只是其中一條): <body> <div class="content"><!--用於包裹一條內容-->         <div class="img

table中的單行省略,並不能td能適應

targe href csdn mage cati 技術分享 ges details image 所以我不得對單行勝率設置width,多行在待測中(傳送門)。。。 table中的單行省略,並不能讓td能自適應

一個元素在容器中垂直居中的幾個方法

body 垂直居中 -s ntb offset set log off htm 方法一,使用js讓元素水平垂直居中 <!DOCTYPE html> <html> <head> <meta charset

一個元素相對於父元素固定定位

但是 ren -c 所有 展示 子元素 需要 不能滑動 play 之前在項目中,遇到了一個場景,需要實現相對於父元素的fixed定位:在父元素內拖動滾動條時,"fixed"定位的元素不能滑動,在外層拖動滾動條時,父元素及父元素內的所有元素跟著一起滑動。但是position:

如何利用rem在移動端不同設備上字體適應大小

iter war width roi wrap 到手 num params 並且 rem由來:font size of the root element,那麽rem是個單位,單位大小由它第一代老祖宗的font-size的大小決定。現在前端碼農們為了能在各個屏幕上看到

CSS一個元素一閃一閃的

post color mes init log blog mat ani ear .heart{ animation:heart 1s ease infinite; } @keyframes heart { 0% {opacity:0.1;}

一個元素在頁面上不顯示的方法

width 隱藏 idt bsp hid 一個 spl 方法 AR 1、display:none; 顯示為無(最常用) 2、visibility:hidden; 隱藏 3、width \ height 改變元素大小 4、透明度 元素便透明 5

頁面中適應iframe高度的問題總結

當需要對iframe進行操作,例如獲取iframe的高度等,iframe和當前頁面需要時同域,跨域情況下是獲取不到的; 當動態設定iframe的高度時,iframe的高度一旦變大是不會自動縮小的。 例如: iframe中 a 頁面高度為800px,b 頁面的高度為500

eayui js動態載入Datagrid,適應寬度,高度

HTML: <div class="easyui-layout" style="min-height:100%;min-width:100%;"> <div id="gridData" class="region:'center',easyui-datagrid" ></