思路一: float
float + calc
通過calc()函式計算出.middle元素的高度，並設定子元素高度為100%
overflow: hidden;
height: calc(100% - 100px);}.left.right.right-in.top,.bottom
top left
right
bottom
float + absolute + (fix)
通過增加結構來提高相容性，.middle元素設定100%的高度，.top和.bottom設定absolute覆蓋在.middle上
position: absolute;
height:50px;
left: 0;
right: 0;}.top.bottom.middlewrap.middle.left.right.right-in
top left
right
bottom
思路二: inline-block
inline-block + calc
height: calc(100% - 100px);
font-size: 0;}.left,.right.left.right.right-in.top,.bottom
top left
right
bottom
inline-block + absolute + (fix)
position: absolute;
left: 0;
right: 0;
height: 50px;}.top.bottom.middlewrap.middle.left,.rightwrap.left.rightwrap.right.right-in
top left
right
bottom
思路三: table
水平方向子元素的間距可以用border實現。所有瀏覽器都不支援給table-cell元素設定overflow屬性。firefox和ie11瀏覽器不支援給table-cell元素的設定100%高度的子元素設定overflow屬性
position: absolute;
width: 100%;
height: 50px;}.bottom.middlewrap.middle.left.rightwrap.right.right-in
top left
right
bottom
思路四: absolute
position: absolute;
left: 0;
right: 0;}.top.bottom.middle.left,.right.left.right.right-in
top left
right
bottom
思路五: flex
flex常用於小範圍的布局，使用全屏布局時會因為效能問題，出現卡頓現象。如果要使用全屏自適應布局，則只有flex才能達到效果
display: flex;
flex-direction: column;}.top,.bottom.middle.left.right.right-in
top left
right
bottom
css 全屏布局
之前寫了幾個居中布局的例子，同時也提到了對於頁面的全屏布局。這裡詳細總結兩種常見的全屏布局的案例，當然，實際上還有像grid這樣的方案，但是因為目前還不穩定，只是作為w3c的乙個草案，相容性自然就差一些，這裡沒有作深入的 相信這樣的頁面布局，我們在很多後台系統上會經常用到 用 表示為這樣的結構 通常...
全屏和退出全屏
1.新增變數 windowplacement m oldwndplacement 用來儲存原視窗位置 bool m bfullscreen 全屏顯示標誌 crect m fullscreenrect 表示全屏顯示時的視窗位置2.全屏 getwindowplacement m oldwndplacem...
Android 切換全屏,取消全屏
切換全屏,取消全屏 param ischecked private void switchfullscreen boolean ischecked else 橫豎屏切換時的生命週期總結 1 不設定activity的android configchanges時，切屏會重新呼叫各個生命週期，切橫屏時會執...