css控制元素高度实现自底向上和自顶向下的方法

从一个常见问题开始讨论：如何用css将一个元素的高度设置为【浏览器内容窗口高度】。

方案一：使元素高度占满屏幕

在css中，vh是一个特殊的长度单位，100vh的值就是【浏览器内容窗口高度】。

因此height:100vh;就使得目标元素拥有【浏览器内容窗口高度】。

方案二：使用级联的height:100%;

方法一只能将设置一个元素拥有【浏览器内容窗口高度】。但是如果我们想要让一系列的元素共同占满高度呢？

这种需求在Web应用的场景中很常见。要想让你的Web应用看起来像是原生应用，我们希望应用的的总体结构始终占满整个屏幕，不多不少，不出现滚动条。如果内部有很多内容需要滚动显示，那么在应用内部的某个div中可以出现滚动条，但是应用主体不滚动。

这是一个高度坍缩的例子，整体的高度完全取决于内容的高度，很丑：

这是一个高度过大的例子，应用整体出现了滚动条，顶栏可以被滚走：

如果整体可以滚动，那么向下滚动以后，顶栏的内容就也会滚上去，消失不见。普通网页经常是这样做的，但是Web应用中不应该出现这种情况。

这是一个高度正常的例子。一个实现良好的Web应用，应用的整体是无法滚动的，但是中间的内容窗口可以滚动：

解决思路：自顶向下控制高度

高度坍缩和高度过大的原因其实是相同的：父元素的高度受子元素高度影响。换句话说，父元素是被子元素“撑开”的。高度的控制是自底向上的。

父元素高度被子元素撑开的原因是height的默认值是auto，auto的计算方式就是根据子元素。

因此，要解决这两个问题，就需要将高度的控制方向颠倒过来：高度的控制是自顶向下的。具体来说就是，要么为元素定义一个明确的高度，要么相对“祖父元素”的高度来设置一个相对高度(百分数)。

定义一个明确的高度：给元素的高度一个明确的值，这样的话它的高度就不会受到它的孩子的影响。比如height:480px;或height:100vh。 相对“祖父元素”的高度来设置一个相对高度：元素的高度由父元素的高度决定，因此不受它的孩子的影响。使用百分比高度来做到这一点：height:100%;或height:90%;。

只要灵活地运用以上两点，开发者就能掌控整个应用各个元素的高度。