为什么百分比高度在位置固定元素上起作用? [英] Why does percentage height work on position fixed element?

问题描述

我了解到，只有在父元素(和父元素)都设置了 height 值的情况下，百分比高度才有效.但是为什么 position:fixed 元素上不需要这样做.

I've learned that percentage height only works if the parent (and parents) elements all has height value set. But why that is not required on a position:fixed element.

div {
    position: fixed;
    width: 50%;
    height: 100%;
    background: silver;
}

<div>placeholder</div>

推荐答案

位置:固定相对于屏幕的视口，并且忽略父元素的位置.

position: fixed is relative to the screen's viewport and ignores parent elements' positioning.

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

固定

请勿为元素留出空间.而是将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它.打印时，将其放置在每页上的该固定位置上.

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.

这篇关于为什么百分比高度在位置固定元素上起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！