HTML5使用纯CSS实现“按比例平分”整个垂直空间

Posted 2021-03-05 Asion Tang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5使用纯CSS实现“按比例平分”整个垂直空间相关的知识，希望对你有一定的参考价值。

HTML5使用纯CSS实现“按比例平分”整个垂直空间

html5使用纯CSS实现“按比例平分”整个垂直空间

需求

需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。

类似以下效果:css布局——底部固定，内容足够多时其位置随内容而变，始终在最底部_网络_wj1224_的博客-CSDN博客

可惜上面网址给出的是固定高度的解决方案.不符合要求.

要求

1. 必须使用纯CSS

假如使用JS根据布局动态计算的话,也是可以的.

通过获取头部和底部的布局高度,再用屏幕高度减去即可得到中部的高度即可.

中部固定高度=屏幕高度 - 头部高度 - 底部高度

2. 不能使用Table布局

因为在UNI-APP项目中,暂不考虑使用HTML别的特定元素来实现布局

3. 不能写死元素的高度

方便适配不同的手机屏幕高度,假如写死高度,则兼容性不佳.

解决方案

最终方案: `display: flex` + `position:fixed;` + `overflow: auto;`

代码如下

<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博客
1. /* 因为是遮罩效果所以要fixed */
2. ? position: fixed;
3. /* 没有这个就不能滚动了 */
4. ? 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博客
1. 绝对定位
2. margin负值
以上两种方法要求footer高度固定。