先从一个常见的问题开始：如何使用css设置元素的高度为【浏览器内容窗口高度】。方案一：让元素高度填满屏幕在css中，vh是一个特殊的长度单位，100vh的值就是[浏览器内容窗口高度]。所以高度：100vh；使目标元素具有[浏览器内容窗口高度]。方案二：使用层叠高度：100%；方法一只能设置一个元素有【浏览器内容窗口高度】。但是如果我们想让一系列的元素一起占据整个高度呢？这种需求在Web应用场景中很常见。为了使您的Web应用程序看起来像原生应用程序，我们希望应用程序的整体结构始终充满整个屏幕，不多不少，也没有滚动条。如果里面有很多内容需要滚动，可以在应用程序内部的div中出现滚动条，但是应用程序的主体不滚动。这是一个高度崩溃的例子。整体高度完全取决于内容的高度。它很丑：这是一个过高的例子。整个应用有一个滚动条，topbar可以滚掉：如果整个应用可以滚动，那么向下滚动后，topbar的内容也会向上滚动消失。普通的网页经常会这样，但是在web应用中不应该这样。这是一个非常正常的例子。对于一个实现良好的Web应用程序，整个应用程序不能滚动，但中间的内容窗口可以滚动：解决方案：自上而下控制高度父元素受子元素高度影响。换句话说，父元素被子元素“扩展”了。高度控制是自下而上的。父元素的高度之所以会被子元素拉长，是因为height的默认值是auto，而auto的计算方式是根据子元素来计算的。因此，要解决这两个问题，就需要把高度控制的方向倒过来：高度控制是自上而下的。具体来说，要么为元素定义一个明确的高度，要么设置一个相对于“祖父元素”高度的相对高度（百分比）。定义一个明确的高度：给元素一个明确的高度，这样它的高度就不会受到它的孩子的影响。例如高度：480px；或高度：100vh。相对于“祖父元素”的高度设置相对高度：元素的高度由父元素的高度决定，因此不受其子元素的影响。使用百分比高度来做到这一点：height:100%;或高度：90%；。只要灵活运用以上两点，开发者就可以控制整个应用中各个元素的高度。在上面的web应用的例子中，解决方案是：首先将元素的高度设置为100%，这使得html元素的高度恰好等于视口（内容窗口）的高度；然后将body的高度设置为100%，这使得body元素的高度恰好等于html元素的高度（也等于视口的高度）...依此类推，从上到下bottom，一直到想要填满屏幕的元素，并将其高度设置为100%，使其高度也等于视口高度。这是自上而下的特例。其实在设置上下高度的过程中，你可以根据自己的排版需要设置一个固定值（100px）或者其他百分比高度（80%）。这种方法确实比直接设置height:100vh麻烦很多；为目标元素。但是这种做法有一个好处：在这个过程中，所有祖先元素的高度都可以由你来控制。只要不刻意为子元素设置比父元素大的高度，那么每个父元素都能容纳子元素，这在大多数情况下是我们想要的。不会出现“子元素高度为100px，但父元素高度未拉伸”的问题。如果你只设置高度：100vh；目标元素的高度，而父元素的高度是从上到下确定的（不受子元素影响），那么父元素会保持原来的高度，不会被拉伸，然后就会出现overflow。这时候就会出现“子元素的高度是xxx，但是父元素的高度没有被拉伸”的问题。自上而下和自下而上的比较并不意味着自上而下就一定比自下而上好。自上而下的好处是只要定义了祖先元素的高度，后代元素的高度也会随之确定。bottom-up的好处是父元素的高度可以根据需要自动扩展，而且正好包裹了所有的子元素。在Web应用程序中，经常需要混合使用这两种方法。“自下而上”对应CSS3中的内在维度（intrinsicdimensions，根据内容计算）的概念，“自上而下”对应外在维度（extrinsicdimensions）的概念（外部维度，根据其所在的容器计算）位于)CSS3)概念中。有关详细信息，请参阅min-content和max-content如何工作？-stackoverflow注意内容溢出的问题注意当父元素的内容框（contentbox）无法容纳子元素时，就会出现溢出。在混合使用自上而下和自下而上的方法时，可能会遇到这样的问题：A元素是B元素的父元素。A元素的高度是自上而下确定的（例如height:80%），B元素的高度是自下而上确定的（height:auto）。当B的子元素拉伸B的高度，超过A的内容框高度时，就会发生溢出。这时考虑两种方案：限制B的高度，即给B元素的高度指定一个不大于父元素高度的值。例如高度：100像素或高度：100%。如果想在A元素中显示B的内容，那么给A设置overflow:auto，这样就可以通过滚动条在有限的空间容纳更大的内容。聊天窗口是overflow:auto的例子参考https://stackoverflow.com/que...https://stackoverflow.com/que...https://stackoverflow.com/a/3...https://stackoverflow.com/a/3...https//www.w3.org/TR/2011/RE...
