HTML5使用纯CSS实现“按比例平分”整个垂直空间
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高度固定。
