css控制元素⾼度实现⾃底向上和⾃顶向下的⽅法
从⼀个常见问题开始讨论：如何⽤css将⼀个元素的⾼度设置为【浏览器内容窗⼝⾼度】。
⽅案⼀：使元素⾼度占满屏幕
在css中，vh是⼀个特殊的长度单位，100vh的值就是【浏览器内容窗⼝⾼度】。
因此height:100vh；就使得⽬标元素拥有【浏览器内容窗⼝⾼度】。css始终显示滚动条
⽅案⼆：使⽤级联的height:100%;
⽅法⼀只能将设置⼀个元素拥有【浏览器内容窗⼝⾼度】。但是如果我们想要让⼀系列的元素共同占满⾼度呢？
这种需求在Web应⽤的场景中很常见。要想让你的Web应⽤看起来像是原⽣应⽤，我们希望应⽤的的总体结构始终占满整个屏幕，不多不少，不出现滚动条。如果内部有很多内容需要滚动显⽰，那么在应⽤内部的某个div中可以出现滚动条，但是应⽤主体不滚动。
这是⼀个⾼度坍缩的例⼦，整体的⾼度完全取决于内容的⾼度，很丑：
这是⼀个⾼度过⼤的例⼦，应⽤整体出现了滚动条，顶栏可以被滚⾛：
如果整体可以滚动，那么向下滚动以后，顶栏的内容就也会滚上去，消失不见。普通⽹页经常是这样做的，但是Web应⽤中不应该出现这种情况。
这是⼀个⾼度正常的例⼦。⼀个实现良好的Web应⽤，应⽤的整体是⽆法滚动的，但是中间的内容窗⼝可以滚动：
解决思路：⾃顶向下控制⾼度
⾼度坍缩和⾼度过⼤的原因其实是相同的：⽗元素的⾼度受⼦元素⾼度影响。换句话说，⽗元素是被⼦元素“撑开”的。⾼度的控制是⾃底向上的。
⽗元素⾼度被⼦元素撑开的原因是height的默认值是auto，auto的计算⽅式就是根据⼦元素。
因此，要解决这两个问题，就需要将⾼度的控制⽅向颠倒过来：⾼度的控制是⾃顶向下的。具体来说就是，要么为元素定义⼀个明确的⾼度，要么相对“祖⽗元素”的⾼度来设置⼀个相对⾼度(百分数)。
1. 定义⼀个明确的⾼度：给元素的⾼度⼀个明确的值，这样的话它的⾼度就不会受到它的孩⼦的影响。⽐
如height:480px；或height:100vh。
2. 相对“祖⽗元素”的⾼度来设置⼀个相对⾼度：元素的⾼度由⽗元素的⾼度决定，因此不受它的孩⼦的影响。使⽤百分⽐
⾼度来做到这⼀点：height:100%；或height:90%;。
只要灵活地运⽤以上两点，开发者就能掌控整个应⽤各个元素的⾼度。
在上⾯Web应⽤的例⼦中，解决⽅案就是：
先将<html>元素的⾼度设置为100%，这使得html元素的⾼度恰好等于viewport(内容窗⼝)的⾼度；然后设置body的⾼度为100%，这使得body元素的⾼度恰好等于html元素的⾼度(也就等于viewport的⾼度)……
就这样不断进⾏，⾃顶向下，⼀路⾛到希望撑满屏幕的那个元素，将它的⾼度也设置为100%，这样它的⾼度也等于viewport ⾼度了。
这是⼀个⾃顶向下的特殊例⼦。实际上你可以在⾃顶向下设置⾼度的过程中，根据⾃⼰的排版需要，设置⼀个定值(100px)，或者其他的百分⾼度(80%)。
这个办法⽐起直接为⽬标元素设置height:100vh;，确实要要⿇烦多了。但是这个办法有⼀个优势：在这个过程中，所有祖先元素的⾼度都能够被你控制。只要你不故意为⼦元素设置⼀个⽐⽗元素还⼤的⾼度，那么每个⽗元素就都能容纳⼦元素，这在⼤多数情况下就是我们所希望的。不会出现“⼦元素⾼度为100px，⽗元素的⾼度却没有被撑开”这种问题。
⽽如果你仅仅设置⽬标元素的height:100vh;，⽽⽗元素的⾼度⼜是由⾃顶向下的⽅式确定的（不受⼦元素影响），那么⽗元素就会维持原⾼度不被撑开，然后就会出现。这时就会出现“⼦元素⾼度为xxx，⽗元素的⾼度却没有被撑开”这种问题。
⾃顶向下的实⽤技巧：让⼦元素填满⽗元素的剩余区域
⾃顶向下的⽅式有⼀个很实⽤的技巧：
<html>
<body>
<header></header>
<div class="content"></div>
</body>
</html>
如果<html>和<body>的⾼度已经确定(100%viewport)，header的⾼度也已经确定(64px)，如何让header下⽅的t恰好填满⽗元素的剩余区域呢？答案也很简单，直接设置t { height: 100%; }就好了。100%是相对于【⽗元素剩余可⽤⾼度】来计算的，因此这个css会让t填满⽗元素剩余区域。
这个图中的效果就是这样实现的：
⾃顶向下和⾃底向上的对⽐
并不是说⾃顶向下就⼀定⽐⾃底向上要好。
⾃顶向下的优势在于，只要定义好祖先元素的⾼度，后裔元素的⾼度也就随之确定。
⾃底向上的优势在于，⽗元素的⾼度能够根据需要⾃动扩张，并且恰好包裹住所有⼦元素。
在⼀个Web应⽤中，往往需要混合使⽤这两种⽅式。
注意内容溢出的问题
注意，当⽗元素的内容盒⼦(content box)⽆法容纳⼦元素时，就会出现。
在混合使⽤⾃顶向下和⾃底向上的⽅式时，有可能会碰到这种问题：
A元素是B元素的⽗元素。A元素的⾼度是通过⾃顶向下的⽅式确定的(⽐如height:80%)，B元素的⾼度是根据⾃底向上的⽅式确定的(height:auto)。当B的⼦元素将B的⾼度撑开，超过A的内容盒⼦⾼度时，就出现了overflow。
这种时候，考虑两个⽅案：
1. 限制B的⾼度，也就是说，为B元素的height指定⼀个不⼤于⽗元素⾼度的值。⽐如height:100px或者height:100%。
2. 如果你希望要在A元素中展⽰B的内容，那么为A设置overflow:auto。这样就能在有限的空间中通过滚动条来容纳更⼤的内
容。
聊天窗⼝就是⼀个overflow:auto的例⼦
参考资料
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。