杰晶网络

css控制元素高度实现自底向上和自顶向下的方法
网页制作 2024/11/9 佚名
3 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

父元素高度被子元素撑开的原因是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;，而父元素的高度又是由自顶向下的方式确定的（不受子元素影响），那么父元素就会维持原高度不被撑开，然后就会出现overflow。这时就会出现“子元素高度为xxx，父元素的高度却没有被撑开”这种问题。

自顶向下的实用技巧：让子元素填满父元素的剩余区域

自顶向下的方式有一个很实用的技巧：

<html>
  <body>
    <header></header>
    <div class="content"></div>
  </body>
</html>

如果<html>和<body>的高度已经确定(100%viewport)，header的高度也已经确定(64px)，如何让header下方的div.content恰好填满父元素的剩余区域呢？答案也很简单，直接设置div.content { height: 100%; }就好了。100%是相对于【父元素剩余可用高度】来计算的，因此这个css会让div.content填满父元素剩余区域。
这个图中的效果就是这样实现的：

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

自顶向下和自底向上的对比

并不是说自顶向下就一定比自底向上要好。

自顶向下的优势在于，只要定义好祖先元素的高度，后裔元素的高度也就随之确定。

自底向上的优势在于，父元素的高度能够根据需要自动扩张，并且恰好包裹住所有子元素。

在一个Web应用中，往往需要混合使用这两种方式。

注意内容溢出的问题

注意，当父元素的内容盒子(content box)无法容纳子元素时，就会出现overflow。

在混合使用自顶向下和自底向上的方式时，有可能会碰到这种问题：

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的例子

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

参考资料

https://stackoverflow.com/questions/7357818/how-can-an-html-element-fill-out-100-of-the-remaining-screen-height-using-css
https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window
https://stackoverflow.com/questions/31893330/html-and-body-elements-height/31895805#31895805
https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html#root-height

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
css控制元素,自底向上,自顶向下
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网