HTML5使用纯CSS实现“按比例平分”整个垂直空间
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>HTML5使用纯CSS实现“按比例平分”整个垂直空间<ul><li>需求</li><li>要求<ul><li>1. 必须使用纯CSS</li><li>2. 不能使用Table布局</li><li>3. 不能写死元素的高度</li></ul></li><li>解决方案<ul><li>有效方案2: <code>display: flex</code> + <code>overflow: auto;</code><strong>+</strong> <strong><code>height:100%;</code></strong></li><li>有效方案1: <code>display: flex</code> + <code>overflow: auto;</code><strong>+</strong> <strong><code>position:fixed;</code></strong></li><li>垂直平分的方案:<code>display: flex</code>+<code>flex</code></li></ul></li><li>参考资料</li></ul></li></ul></div><p></p><h1 id="html5使用纯css实现按比例平分整个垂直空间">HTML5使用纯CSS实现“按比例平分”整个垂直空间</h1>
<h2 id="需求">需求</h2>
<p>需要实现头部固定在"屏幕"上方+中部滚动+底部固定在"屏幕"下方的页面布局样式。</p>
<p>类似以下效果:css布局——底部固定，内容足够多时其位置随内容而变，始终在最底部_网络_wj1224_的博客-CSDN博客</p>
<blockquote>
<p>可惜上面网址给出的是固定高度的解决方案.不符合要求.</p>
</blockquote>
<h2 id="要求">要求</h2>
<h3 id="1-必须使用纯css">1. 必须使用纯CSS</h3>
<p>假如使用JS根据布局动态计算的话,也是可以的.</p>
<p>通过获取头部和底部的布局高度,再用屏幕高度减去即可得到中部的高度即可.</p>
<blockquote>
<p>中部固定高度=屏幕高度 - 头部高度 - 底部高度</p>
</blockquote>
<h3 id="2-不能使用table布局">2. 不能使用Table布局</h3>
<p>因为在UNI-APP项目中,暂不考虑使用HTML别的特定元素来实现布局</p>
<h3 id="3-不能写死元素的高度">3. 不能写死元素的高度</h3>
<p>方便适配不同的手机屏幕高度,假如写死高度,则兼容性不佳.</p>
<h2 id="解决方案">解决方案</h2>
<h3 id="有效方案2-display-flex--overflow-auto-height100">有效方案2: <code>display: flex</code> + <code>overflow: auto;</code><strong>+</strong> <strong><code>height:100%;</code></strong></h3>
<p>代码如下</p>
<pre><code class="language-html"><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>
</code></pre>
<p><strong>缺点</strong>: 当全局各种元素的Margin和Padding没有重置为0的话,会出现3个滚动条.最外围Body级多了一个滚动条,导致某些情况下不够完美. 有效方案1则没有这个问题.</p>
<h3 id="有效方案1-display-flex--overflow-auto-positionfixed">有效方案1: <code>display: flex</code> + <code>overflow: auto;</code><strong>+</strong> <strong><code>position:fixed;</code></strong></h3>
<p>代码如下</p>
<pre><code class="language-html"><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>
</code></pre>
<h3 id="垂直平分的方案display-flexflex">垂直平分的方案:<code>display: flex</code>+<code>flex</code></h3>
<blockquote>
<p>此方案中部内容少时,底部显示在屏幕底部,内容多时,底部跟随文档滚动,显示在文档末尾.</p>
</blockquote>
<p>当中部内容<strong>少</strong>于其分配所得的剩余空间时,头部和底部能正常待在所预期的位置上.</p>
<pre><code><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>
</code></pre>
<p>可是当中部内容<strong>多</strong>于其分配所得的剩余空间时,子元素的高度会撑爆父容器的高度，而不是“固定”为其一开始“分配所得的剩余空间”</p>
<pre><code class="language-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>
</code></pre>
<h2 id="参考资料">参考资料</h2>
<ol>
<li>
<p>css实现页面底部固定在屏幕最下方,内容占满屏后紧跟其后的两种方法_JavaScript_想飞的猪的博客-CSDN博客</p>
<blockquote>
<ol>
<li><em>/* 因为是遮罩效果所以要fixed */</em></li>
<li> position: fixed;</li>
<li><em>/* 没有这个就不能滚动了 */</em></li>
<li> overflow: auto;</li>
</ol>
</blockquote>
</li>
<li>
<p>利用 flex 实现宽度自适应布局 · Issue #14 · shaozj/blog</p>
<blockquote>
<p><code>flex-shrink: 0;</code> 表示 flex 元素超出容器时，宽度不压缩，这样就能撑开元素的宽度，使得出现滚动条。</p>
</blockquote>
</li>
<li>
<p>flex布局中，保持内容不超出容器的解决办法_JavaScript_Alex_Zhao 的博客-CSDN博客</p>
<blockquote>
<p>如果不设置宽度，.content可以被子节点无限撑开；</p>
<p>即给 content 设置了 flex 为 1 的时候，它会动态的获得父容器的剩余宽度，且不会被自己的子元素把内容撑开。</p>
</blockquote>
</li>
<li>
<p>CSS - 定位属性position使用详解（static、relative、fixed、absolute）</p>
<blockquote>
<p>（1）<strong>fixed</strong> 生成绝对定位的元素，该元素相对于浏览器窗口进行定位。</p>
<p>（2）固定定位的元素不会随浏览器窗口的滚动条滚动而变化，也不会受文档流动影响，而是始终位于浏览器窗口内视图的某个位置。</p>
</blockquote>
</li>
<li>
<p>记录一个父级div不能被子级内容撑开的解决方法，父级div没有高度的解决方法。_网络_lihang199的博客-CSDN博客</p>
<blockquote>
<p>flex布局中div不被撑开的情况可能是初始化的 flex-shrink 值为1，即空间不足自动挤压，设置值为0，即可撑开div</p>
</blockquote>
</li>
<li>
<p>flex子元素溢出_dearMengJJ的博客-CSDN博客</p>
<blockquote>
<p>原理：弹性布局中的元素是有伸展和收缩自身的能力的。</p>
</blockquote>
</li>
<li>
<p>flex:1,min-width: 0 保证内容不超出父盒子_JavaScript_LiuJingye123的博客-CSDN博客</p>
<blockquote>
<p>如果没有设置min-width，当内容大于剩余盒子宽度时会超出父盒子，设置min-width保证内容局限在父盒子内</p>
</blockquote>
</li>
<li>
<p>前端：页面内容不够，始终把footer固定在底部_JavaScript_前端小白菜-CSDN博客</p>
<blockquote>
<ol>
<li>绝对定位</li>
<li>margin负值</li>
</ol>
<p>以上两种方法要求footer高度固定。</p>
</blockquote>
</li>
</ol>
</div>
<div id="MySignature" role="contentinfo">
<div>作者：Asion Tang</div><div>出处：http://asiontang.cnblogs.com</div><div>凡是没有注明[转载]的文章，本Blog发表的文章版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 </div><br><br>
来源：https://www.cnblogs.com/AsionTang/p/12516719.html
頁:
[1]