html自適應頁面上下左右分欄的處理技巧
阿新 • • 發佈：2019-02-04
html自適應頁面上下左右分欄的效果可以借用CSS或者jQuery進行處理。
CSS中的width和height屬性的值帶%的情況：
height:100% 代表基於包含它的塊級物件（即父元素）的百分比高度，此時為100%。
width:100% 代表基於包含它的塊級物件（即父元素）的百分比寬度，此時為100%。
使某元素（例如id為container的元素）佔據整個頁面的全部時的CSS程式碼如下：
#container {
width: 100%;
height: 100%;
}簡單的帶有的頭注和腳註頁面例項：
<html> <head> <style> html,body {margin:0;padding:0; } #mainContainer { height:100%; width:100%; } #header { height:15%; width:100%; background-color:red; } #center { height:75%; width:100%; background-color:blue; } #footer { height:10%; width:100%; background-color:pink; } </style> </head> <body> <div id="mainContainer"> <div id="header">Header</div> <div id="center">Center</div> <div id="footer">Footer</div> </div> </body> </html>
假如當一個父元素中有兩個或多個元素時，需要其中一個元素佔據除其他元素所佔的空間之外剩下的所有空間，則可以在頁面初始化後通過jQuery修改它的高度和寬度屬性。
例如，其他元素總共佔父元素高70畫素、寬25畫素的空間且都在一成片區域，父元素寬也為25畫素。
// 頁面初始化後呼叫 $(document).ready(function () { // 使視窗最大化 if (document.body.offsetWidth < screen.width) { try { window.moveTo(0, 0); window.resizeTo(window.screen.availWidth, window.screen.availHeight); } catch (e) { throw e; } } // 使mainContent的高度為父元素的全部高度減去70畫素的高度 $(".mainContent").css('height', '100%').css('height', '-=70px'); // 使mainContent的寬度為父元素的全部寬度減去25畫素的寬度 $(".mainContent").css('width', '100%').css('width', '-=25px'); });
參考自：css width: calc(100% -100px); alternative using jquery http://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery