：
上下兩條固定到上邊和下邊，中間的內容區域佔據剩餘的空間；
all、html,body,#container
第一種方法、
1、header高度固定畫素，footer固定畫素。section高度calc(100% - header高度 - footer高度)；
2、header,footer設定絕對定位的方式(absolute)，分別top:0; bottom:0;
3、將section設定overflow-y:auto;
第二種方法、
1、header高度固定畫素，footer固定畫素。section也設定定位，top:header高度，bottom:footer高度
2、header,footer設定絕對定位的方式(absolute)，分別top:0; bottom:0;
3、將section設定overflow-y:auto;
第三種方法、
1、header高度固定畫素，footer固定畫素。header,footer設定絕對定位的方式(absolute)，分別top:0; bottom:0;
2、section高度為100%，設定section上下內填充為header和footer的高度；
3、將section設定overflow-y:auto;
第四種方法:彈性盒
1.把最大的父元素設定display:flex,flex-direction:column;
2、section設定flex:1;overflow-y:auto;
問題：
固定定位，彈性盒在寫結構的時候，如果當前頁面需要彈出內建鍵盤，會將footer部分固定到鍵盤的上邊，如果不希望footer部分的位置發生變化 ，不能採用這兩種 方式，得用以上的1，2，3種辦
移動端頁面布局
關於移動端頁面的總結，最近接觸移動端頁面，簡單的介紹幾種頁面布局吧，以後繼續補充。1 移動端頁面需要在頭部新增 2 移動頁面的布局方式 1 橫向百分比，縱向畫素值 可以採用百分比 相對度量單位 進行盒模型橫向屬性 width 左右內邊距 左右外邊距 的製作，使用em 相對度量單位 實現文字的處理。但...
移動端開發頁面布局 3
1 響應式布局定義 頁面布局會隨著螢幕大小變化而發生不同的響應，稱為響應式布局。1 不需要單獨寫移動端頁面 2 根據不同裝置發生變化 2 原理 通過 查詢針對不同寬度的裝置進行布局和樣式的設定，從而適配不同裝置 分四個檔位 手機 768px 平板 768px 992px 桌面顯示器 992px 12...
移動端頁面適配，rem布局
移動端頁面適配 em 根據元素自身的字型大小來計算自己的尺寸 rem root em 根據根節點 html 的字型大小來計算自己的尺寸 適配 各個移動裝置，解析度大小不一致，使我們的頁面在各種解析度下都顯示完好 等比的縮放 根據螢幕的解析度 動態的設定html的字型大小，來達到頁面等比縮放的功能 注...