标签：absolute 滚动条 html5 block task 文档 log 文档流 开始
目录
需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。
类似以下效果:css布局——底部固定，内容足够多时其位置随内容而变，始终在最底部_网络_wj1224_的博客-CSDN博客
可惜上面网址给出的是固定高度的解决方案.不符合要求.
假如使用JS根据布局动态计算的话,也是可以的.
通过获取头部和底部的布局高度,再用屏幕高度减去即可得到中部的高度即可.
中部固定高度=屏幕高度 - 头部高度 - 底部高度
因为在UNI-APP项目中,暂不考虑使用HTML别的特定元素来实现布局
方便适配不同的手机屏幕高度,假如写死高度,则兼容性不佳.
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博客
- /* 因为是遮罩效果所以要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高度固定。
标签：absolute 滚动条 html5 block task 文档 log 文档流 开始
原文地址：https://www.cnblogs.com/AsionTang/p/12516719.html
