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>

参考资料

  1. css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法_JavaScript_想飞的猪的博客-CSDN博客

    1. /* 因为是遮罩效果所以要fixed */
    2. ​ position: fixed;
    3. /* 没有这个就不能滚动了 */
    4. ​ overflow: auto;
  2. 利用 flex 实现宽度自适应布局 · Issue #14 · shaozj/blog

    flex-shrink: 0; 表示 flex 元素超出容器时,宽度不压缩,这样就能撑开元素的宽度,使得出现滚动条。

  3. flex布局中,保持内容不超出容器的解决办法_JavaScript_Alex_Zhao 的博客-CSDN博客

    如果不设置宽度,.content可以被子节点无限撑开;

    即给 content 设置了 flex 为 1 的时候,它会动态的获得父容器的剩余宽度,且不会被自己的子元素把内容撑开。

  4. CSS - 定位属性position使用详解(static、relative、fixed、absolute)

    (1)fixed 生成绝对定位的元素,该元素相对于浏览器窗口进行定位。

    (2)固定定位的元素不会随浏览器窗口的滚动条滚动而变化,也不会受文档流动影响,而是始终位于浏览器窗口内视图的某个位置。

  5. 记录一个父级div不能被子级内容撑开的解决方法,父级div没有高度的解决方法。_网络_lihang199的博客-CSDN博客

    flex布局中div不被撑开的情况可能是初始化的 flex-shrink 值为1,即空间不足自动挤压,设置值为0,即可撑开div

  6. flex子元素溢出_dearMengJJ的博客-CSDN博客

    原理:弹性布局中的元素是有伸展和收缩自身的能力的。

  7. flex:1,min-width: 0 保证内容不超出父盒子_JavaScript_LiuJingye123的博客-CSDN博客

    如果没有设置min-width,当内容大于剩余盒子宽度时会超出父盒子,设置min-width保证内容局限在父盒子内

  8. 前端:页面内容不够,始终把footer固定在底部_JavaScript_前端小白菜-CSDN博客

    1. 绝对定位
    2. margin负值

    以上两种方法要求footer高度固定。

posted @ 2020-03-18 12:46  Asion Tang  阅读(841)  评论(0编辑  收藏