div自適應螢幕高度
問題描述:本地專案頁面左側選單點選父親節點拉伸出子節點後,演示的陰影不能覆蓋所有的左側選單,現象如下圖:此時整個演示的頁面要通過滾動條才能看到整個選單內容
整個選單都放在div中,div的父親節點為body,此時設定了height為100%,依然沒有效果
<div class="leftpanel">
開始考慮的解決方案是div自適應螢幕大小,嘗試方案如下:嘗試方案:
1.通過css樣式修改,設定最小高度
無效_height:200px; /* css 註解: 僅IE6設別此屬性,假定最低高度是200px ,設定高度200px,內容超出後IE6會自動撐高設定高度 */ min-height:200px; /* css註釋
2.設定body和html的height都為100%
無效
3.通過js獲取到螢幕高度,然後設定div的高度為螢幕高度
獲取到螢幕高度之後依然無效,開始考慮這個問題並不是div高度等於螢幕的高度,而是當子選單拉伸出來後,多餘的選單已經超過了div的高度(也就是螢幕的高度,所有產生了滾動條),此時給div增加了一個css樣式後,問題解決!<div id="test" style=" border: solid 1px #f00; "></div> <script type="text/javascript"> autodivheight(); 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("test").style.height= winHeight +"px"; } window.onresize=autodivheight; //瀏覽器視窗發生變化時同時變化DIV高度 </script>
display: table;
相關推薦
div自適應螢幕高度
問題描述:本地專案頁面左側選單點選父親節點拉伸出子節點後,演示的陰影不能覆蓋所有的左側選單,現象如下圖:此時整個演示的頁面要通過滾動條才能看到整個選單內容 整個選單都放在div中,div的父親節點為body,此時設定了height為100%,依然沒有效果 <div
怎麼讓Html的高度自適應螢幕高度
在寫css靜態頁面的時候讓Html的高度自適應螢幕高度是一個常見的需求,比如你有一個需要置底的bottom按鈕,需要在內容不足一屏的時候顯示在螢幕的底部,在內容超過一屏的時候顯示在所有內容的底部。
DIV自適應螢幕解析度,垂直水平居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <
Div 自適應螢幕大小
Background 有時, 我們需要將div或者其他的Element 自適應螢幕,視窗以及瀏覽器 , 這樣會提高頁面美觀,提升使用者體驗, 只是個小問題,但是它用到的知識 還是可以吸收一下。 Knowledge prepared 這裡準備下我們所
怎麼讓div的高度自適應螢幕的高度
html,body{height:100%; width:100%; overflow:hidden; margin:0;padding:0;} body{height:100%; width:100%; overflow:hidden; margin:0;padding
div 自適應高度 最大高度後滾動條顯示
背景:為解決這樣一種情況:設定div的最大高度為xx%,想要自適應瀏覽器視窗高度,但是超出div高度的部分,就算設定滾動條scroll或者auto,滾動條也並不會顯示出來。而max-height為具體px的則會顯示。下面隨便弄點程式碼說明這2種情況: 一、高度自適應設定為
H5 佈局 -- 讓容器充滿螢幕高度或自適應剩餘高度
在前端頁面佈局中,經常會碰到要讓容器充滿整個螢幕高度或者剩餘螢幕高度的需求。一般這時候都會想當然的使用 height:100% 這樣的 CSS 來寫。這樣寫的話,當容器內內容很多的時候是沒有問題的,可以達到預期的效果,但是如果容器內內容比較少,不足以撐起足夠的高
如何讓一個元素自適應螢幕的高度
讓一個元素的高度和螢幕的高度一樣,並且隨著螢幕高度的變化而變化,用js程式碼實現;記得寫完呼叫這個函式; //====tree的自適應高度start==
div 自適應高度 自動填充剩餘高度
html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; } .A { hei
如何讓body及裡面的div、表格等自動適應螢幕高度
今天我做一個表格在頁面裡,想要這個表格自動適應螢幕的高度,把他的高度設為了100%,style="height:100%",但設了之後,表格顯示不出來,於是我想可能是body的高度還要設為100%吧,但設了之後還是沒變化。最後找了我們的專案發現,除了body要設為100%外,
子元素div高度不確定,父div自適應高度
在最外層div加以下樣式 height:100%;overflow:hidden; 其它方法: Div即父容器不根據內容自適應高度,我們看下面的程式碼: <div id="main"> <div id="content"></div&g
關於自適應螢幕,設定子元素浮動,父div不能包裹子div,子元素中內容溢位的問題。
設定HTML適應不同解析度的螢幕。 需求結構如下: HTML結構程式碼如下(只是其中一條): <body> <div class="content"><!--用於包裹一條內容--> <div class="img
讓div自適應瀏覽器窗口居中顯示
col style comm 適應 http img relative 水平 mar 讓div自適應瀏覽器窗口居中顯示 轉載自:http://www.cnblogs.com/qiye2016/p/5492983.html 今天做 banner 時發現一個問題,就是
html div自適應動態上下左右居中
自適應 一半 動態 一個 roman body 左右 posit tro html 的body裏只放一個div,其他的內容放在這個div裏,設置div的樣式如下: div { pos
div自適應水平垂直居中的方法
tom ott boot for add 柵格 ftl IV tst 1.Flexbox布局: display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap柵格布局 一共1
頁面中自適應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" ></
【IOS學習筆記】為UICollectionView設定自適應螢幕寬度以及點選效果
1、設定代理 @property (weak, nonatomic) IBOutlet UICollectionView *gridview; _gridview.dataSource=self; _gridview.delegate=self; 2、實現方法 筆者使用
微信小程式scroll-view元件自適應不同高度的手機
已知微信相比於H5開發有rpx這個單位可以自適應一些不同寬度的手機,但是有的時候需要自適應一些手機高度賊大的手機比如iphoneX系列 所以scroll-view的wxss樣式裡肯定不能寫死,我能想到的方法就是js裡頭載入畫面前再設定高度 wxml裡 <scrol
web頁面自適應螢幕的疑問列舉
在做專案中,一般不會在大螢幕上進行測試,偶爾的一次機會,我在一個大屏的蘋果臺式電腦上檢視我做的頁面,發現了一些適應不好的地方,因此存在一些疑慮; 1.現在的前端UI框架已經基本上可以做到在普通電腦上的自適應或響應式,我的疑問舉例說明: <div class="layui-contain