html - 展开高度CSS

标签 html css

我正在尝试将我的 body 标记扩展到整个浏览器高度以完全显示背景颜色。我知道有一些解决方案建议使用 100% 的 html 标签高度和 100% 高度的 body 标签或 100% 的最小高度。

我找到了一个解决方案(如下),它通过指定完整视口(viewport)的最小高度实现了相同的结果,并且适用于不同的浏览器。我可以将其用作替代解决方案吗?如果有的话,这个解决方案的缺点是什么?请提供一些支持证据。

body {
background-color:#ea7400;
height: 100%;
min-height: 100vh;
}

最佳答案

@Josethehose 提供了一条评论,指导我获取有关我的问题的有用信息。参见 min-height in vh vs % for body?

虽然我的解决方案确实有效,但我认为它不是最佳解决方案,因为它使用了不必要的代码。

解释: html 和 body 标签没有默认高度,可以相对于它们的父元素调整大小。 层次结构是 Viewport > HTML > Body。浏览器屏幕的实际大小是视口(viewport),因此为 html 标记指定 height: 100% 将确保它是其父元素或视口(viewport)的完整高度。 height: 100%可以和body标签结合实现父元素的全高或者继承自Viewport的html标签。

最佳解决方案是:

 html,
 body {
 height: 100%;
 }

关于html - 展开高度CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51406500/

相关文章:

html - 有没有办法改变div的:after psuedoelement when hovering over it's :before psuedoelement?的风格

Javascript - 选择元素的子元素的第一个元素

css - 即 8 : background-size fix

javascript - 删除和读取一个元素会将另一个元素向下推,在开发工具中切换 float 会使该元素移回正确的位置

html - 如何正确地使相对定位的 div 填充绝对定位的父级

css - 如果由于固定尺寸 div 中的溢出属性而隐藏段落,如何在固定位置显示段落?

html - 我需要在我的内容右侧添加一个侧边栏

css - 真正居中的垂直和水平 CSS Div

jquery - 显示 flex 导致混合间距问题

html - Bootstrap Material float 标签不适用于自动填充