如何让子元素/组件忽略其父元素的大小？

Question

我在组件 B（标题）内渲染组件 A（全屏覆盖）。我将组件A指定为height: 100vh，它确实是我屏幕的高度，只是它被我的标题大小向下推。

我希望它既是屏幕的高度又覆盖整个屏幕，但不指定margin-top: -$(size of my header)。

我该怎么做？

Answer 1

通过使用属性position 和值fixed。

如 cmets 中所述，您可以使用 position 属性，如下所示：

<div class="componentA">test</div>

.componentA {
    position: fixed; // we make it position relative to the viewport.
    top:0; // top edge of content box to top position 0
    right:0; // right edge of content box to right position 0
    bottom:0; // bottom edge of content box to bottom position 0
    left:0; // left edge of content box to left position 0
}

正如你所看到的，我们现在已经将具有类 componentA 的 div 的 内容框 边缘定位在视口的零点（上、右、下、左）。如果这有意义的话。

关于位置：固定；（来自w3school）

带有position: fixed; 的元素相对于视口定位，这意味着即使页面滚动，它也始终保持在同一个位置。 top、right、bottom 和 left 属性用于定位元素。

视口（来自this answer）

视口是用户当前可以看到的网页部分。滚动条移动视口以显示页面的其他部分。

更具体地说，视口与屏幕分辨率或浏览器窗口的大小无关；它仅指用户在任何给定时间可以看到网页的空间。