摘要：高度的控制是自底向上的。因此，要解决这两个问题，就需要将高度的控制方向颠倒过来高度的控制是自顶向下的。元素的高度是通过自顶向下的方式确定的比如，元素的高度是根据自底向上的方式确定的。
从一个常见问题开始讨论：如何用css将一个元素的高度设置为【浏览器内容窗口高度】。
方案一：使元素高度占满屏幕在css中，vh是一个特殊的长度单位，100vh的值就是【浏览器内容窗口高度】。
因此height:100vh;就使得目标元素拥有【浏览器内容窗口高度】。
方法一只能将设置一个元素拥有【浏览器内容窗口高度】。但是如果我们想要让一系列的元素共同占满高度呢？
这种需求在Web应用的场景中很常见。要想让你的Web应用看起来像是原生应用，我们希望应用的的总体结构始终占满整个屏幕，不多不少，不出现滚动条。如果内部有很多内容需要滚动显示，那么在应用内部的某个div中可以出现滚动条，但是应用主体不滚动。
这是一个高度坍缩的例子，整体的高度完全取决于内容的高度，很丑：
这是一个高度过大的例子，应用整体出现了滚动条，顶栏可以被滚走：
如果整体可以滚动，那么向下滚动以后，顶栏的内容就也会滚上去，消失不见。普通网页经常是这样做的，但是Web应用中不应该出现这种情况。
这是一个高度正常的例子。一个实现良好的Web应用，应用的整体是无法滚动的，但是中间的内容窗口可以滚动：
高度坍缩和高度过大的原因其实是相同的：父元素的高度受子元素高度影响。换句话说，父元素是被子元素“撑开”的。高度的控制是自底向上的。
父元素高度被子元素撑开的原因是height的默认值是auto，auto的计算方式就是根据子元素。
因此，要解决这两个问题，就需要将高度的控制方向颠倒过来：高度的控制是自顶向下的。具体来说就是，要么为元素定义一个明确的高度，要么相对“祖父元素”的高度来设置一个相对高度(百分数)。
定义一个明确的高度：给元素的高度一个明确的值，这样的话它的高度就不会受到它的孩子的影响。比如height:480px;或height:100vh。
相对“祖父元素”的高度来设置一个相对高度：元素的高度由父元素的高度决定，因此不受它的孩子的影响。使用百分比高度来做到这一点：height:100%;或height:90%;。
只要灵活地运用以上两点，开发者就能掌控整个应用各个元素的高度。
在上面Web应用的例子中，解决方案就是：
先将元素的高度设置为100%，这使得html元素的高度恰好等于viewport(内容窗口)的高度；然后设置body的高度为100%，这使得body元素的高度恰好等于html元素的高度(也就等于viewport的高度)……
就这样不断进行，自顶向下，一路走到希望撑满屏幕的那个元素，将它的高度也设置为100%，这样它的高度也等于viewport高度了。
这是一个自顶向下的特殊例子。实际上你可以在自顶向下设置高度的过程中，根据自己的排版需要，设置一个定值(100px)，或者其他的百分高度(80%)。
这个办法比起直接为目标元素设置height:100vh;，确实要要麻烦多了。但是这个办法有一个优势：在这个过程中，所有祖先元素的高度都能够被你控制。只要你不故意为子元素设置一个比父元素还大的高度，那么每个父元素就都能容纳子元素，这在大多数情况下就是我们所希望的。不会出现“子元素高度为100px，父元素的高度却没有被撑开”这种问题。
而如果你仅仅设置目标元素的height:100vh;，而父元素的高度又是由自顶向下的方式确定的（不受子元素影响），那么父元素就会维持原高度不被撑开，然后就会出现overflow。这时就会出现“子元素高度为xxx，父元素的高度却没有被撑开”这种问题。
并不是说自顶向下就一定比自底向上要好。
自顶向下的优势在于，只要定义好祖先元素的高度，后裔元素的高度也就随之确定。
自底向上的优势在于，父元素的高度能够根据需要自动扩张，并且恰好包裹住所有子元素。
在一个Web应用中，往往需要混合使用这两种方式。
注意，当父元素的内容盒子(content box)无法容纳子元素时，就会出现overflow。
在混合使用自顶向下和自底向上的方式时，有可能会碰到这种问题：
A元素是B元素的父元素。A元素的高度是通过自顶向下的方式确定的(比如height:80%)，B元素的高度是根据自底向上的方式确定的(height:auto)。当B的子元素将B的高度撑开，超过A的内容盒子高度时，就出现了overflow。
这种时候，考虑两个方案：
限制B的高度，也就是说，为B元素的height指定一个不大于父元素高度的值。比如height:100px或者height:100%。
如果你希望要在A元素中展示B的内容，那么为A设置overflow:auto。这样就能在有限的空间中通过滚动条来容纳更大的内容。
聊天窗口就是一个overflow:auto的例子参考资料
https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://stackoverflow.com/a/3...
https://www.w3.org/TR/2011/RE...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116731.html
摘要：主轴方向的多余空间的出现是因为容器宽度元素项宽度之和。对空间分配的思考是如何计算项的宽度的所有项先按照原始宽度在容器中排列。开发时布局的一般流程根据设计，确定需要多少行来显示所有内容，然后确定每一行有哪些项。对每一项，定义其样式。 阅读本文之前最好对flex布局有基本了解，可以通过参考资料中列举的资源来学习。 flex布局规范的设计目标 一维布局模型(one-dimensional...
摘要：上一篇中已经介绍了几个简单的排序算法，这一篇文章我将继续向大家介绍排序算法相关的内容，本篇的会介绍希尔排序快速排序归并排序以及分治算法的思想，希望通过本文章能够加深大家对排序算法的理解。 上一篇中已经介绍了几个简单的排序算法，这一篇文章我将继续向大家介绍排序算法相关的内容，本篇的会介绍希尔排序、快速排序、归并排序以及分治算法的思想，希望通过本文章能够加深大家对排序算法的理解。 希尔排序...
摘要：在本文中，笔者主要想分享一下自底向上构建知识图谱的全过程，抛砖引玉，欢迎大家交流。随着自动知识抽取与加工技术的不断成熟，当前的知识图谱大多采用自底向上的方式构建，如的和微软的知识库。 阿里妹导读：知识图谱的构建技术主要有自顶向下和自底向上两种。其中自顶向下构建是指借助百科类网站等结构化数据源，从高质量数据中提取本体和模式信息，加入到知识库里。而自底向上构建，则是借助一定的技术手段，从...
摘要：有网友私信我，期待我的下一篇数据结构。前言数据结构与算法专题会不定时更新，欢迎各位读者监督。本文介绍数据结构里一些复杂的数据结构树，相应的会补充一些算法。除根节点外，每个节点又可以分为多个不相交的子树。 声明：码字不易，转载请注明出处，欢迎文章下方讨论交流。有网友私信我，期待我的下一篇数据结构。非常荣幸文章被认可，也非常感谢你们的监督。 前言：Java数据结构与算法专题会不定时更新，欢...
阅读 1157·2023-04-26 01:35
阅读 2512·2021-11-02 14:44
阅读 7639·2021-09-22 15:38
阅读 2204·2021-09-06 15:11
阅读 3719·2019-08-30 15:53
阅读 795·2019-08-29 16:54
阅读 629·2019-08-26 13:48
阅读 1761·2019-08-26 13:47
