HTML5使用純CSS實現“按比例平分”整個垂直空間
需求
需要實現頭部固定在"屏幕"上方+中部滾動+底部固定在"屏幕"下方的頁面布局樣式。
類似以下效果:css布局——底部固定，內容足夠多時其位置隨內容而變，始終在最底部_網絡_wj1224_的博客-CSDN博客
可惜上面網址給出的是固定高度的解決方案.不符合要求.
要求
1. 必須使用純CSS
假如使用JS根據布局動態計算的話,也是可以的.
通過獲取頭部和底部的布局高度,再用屏幕高度減去即可得到中部的高度即可.
中部固定高度=屏幕高度 - 頭部高度 - 底部高度
2. 不能使用Table布局
因為在UNI-APP項目中,暫不考慮使用HTML別的特定元素來實現布局
3. 不能寫死元素的高度
方便適配不同的手機屏幕高度,假如寫死高度,則兼容性不佳.
解決方案
有效方案2: display: flex + overflow: auto;+ height:100%;
代碼如下
<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;height:100%">
<div>我始終顯示在屏幕頂部</div>
<div style="flex: 1;overflow: auto;">
<ol>
<li>我是長長的內容；需要支持滾動；占剩余空間的比例為1份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
<div style="flex: 5;overflow: auto;">
<ol>
<li>我是長長的內容；需要支持滾動；占剩余空間的比例為5份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
<div >我始終顯示在屏幕底部</div>
</body>
</html>
缺點: 當全局各種元素的Margin和Padding沒有重置為0的話,會出現3個滾動條.最外圍Body級多了一個滾動條,導致某些情況下不夠完美. 有效方案1則沒有這個問題.
有效方案1: display: flex + overflow: auto;+ position:fixed;
代碼如下
<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;position:fixed; top:0;left: 0;right: 0;bottom: 0;">
<div>我始終顯示在屏幕頂部</div>
<div style="flex: 1;overflow: auto;">
<ol>
<li>我是長長的內容；需要支持滾動；占剩余空間的比例為1份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
<div style="flex: 5;overflow: auto;">
<ol>
<li>我是長長的內容；需要支持滾動；占剩余空間的比例為5份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
<div >我始終顯示在屏幕底部</div>
</body>
</html>
垂直平分的方案:display: flex+flex
此方案中部內容少時,底部顯示在屏幕底部,內容多時,底部跟隨文檔滾動,顯示在文檔末尾.
當中部內容少於其分配所得的剩余空間時,頭部和底部能正常待在所預期的位置上.
<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
<div>我現在顯示在屏幕頂部</div>
<div style="flex: 1;overflow: auto;">
<ol>
<li>我是短短的內容；</li>
</ol>
</div>
</div>
<div >我現在顯示在屏幕底部</div>
</body>
</html>
可是當中部內容多於其分配所得的剩余空間時,子元素的高度會撐爆父容器的高度，而不是“固定”為其一開始“分配所得的剩余空間”
<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
<div>我現在顯示在文檔的頂部,會隨文檔滾動</div>
<div style="flex: 1;overflow: auto;">
<ol>
<li>我是長長的內容；自身無法滾動；會隨文檔滾動</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol>
</div>
</div>
<div >我現在顯示在文檔的底部,會隨文檔滾動；</div>
</body>
</html>
參考資料
-
css實現頁面底部固定在屏幕最下方,內容占滿屏后緊跟其后的兩種方法_JavaScript_想飛的豬的博客-CSDN博客
- /* 因為是遮罩效果所以要fixed */
- position: fixed;
- /* 沒有這個就不能滾動了 */
- overflow: auto;
-
利用 flex 實現寬度自適應布局 · Issue #14 · shaozj/blog
flex-shrink: 0;表示 flex 元素超出容器時，寬度不壓縮，這樣就能撐開元素的寬度，使得出現滾動條。 -
flex布局中，保持內容不超出容器的解決辦法_JavaScript_Alex_Zhao 的博客-CSDN博客
如果不設置寬度，.content可以被子節點無限撐開；
即給 content 設置了 flex 為 1 的時候，它會動態的獲得父容器的剩余寬度，且不會被自己的子元素把內容撐開。
-
CSS - 定位屬性position使用詳解（static、relative、fixed、absolute）
（1）fixed 生成絕對定位的元素，該元素相對於瀏覽器窗口進行定位。
（2）固定定位的元素不會隨瀏覽器窗口的滾動條滾動而變化，也不會受文檔流動影響，而是始終位於瀏覽器窗口內視圖的某個位置。
-
記錄一個父級div不能被子級內容撐開的解決方法，父級div沒有高度的解決方法。_網絡_lihang199的博客-CSDN博客
flex布局中div不被撐開的情況可能是初始化的 flex-shrink 值為1，即空間不足自動擠壓，設置值為0，即可撐開div
-
flex子元素溢出_dearMengJJ的博客-CSDN博客
原理：彈性布局中的元素是有伸展和收縮自身的能力的。
-
flex:1,min-width: 0 保證內容不超出父盒子_JavaScript_LiuJingye123的博客-CSDN博客
如果沒有設置min-width，當內容大於剩余盒子寬度時會超出父盒子，設置min-width保證內容局限在父盒子內
-
前端：頁面內容不夠，始終把footer固定在底部_JavaScript_前端小白菜-CSDN博客
- 絕對定位
- margin負值
以上兩種方法要求footer高度固定。