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

Question

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

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

我该怎么做？

Answer 1

通过使用值fixed的属性position 。

如评论中所述，您可以使用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
}

如您所见，我们现在已将带有 class 组件A 的 div 的内容框边缘定位在视口的零点（上、右、下、左）。 如果这是有道理的。

关于 position：已修复； （来自w3school ）

带有position: fixed; 相对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。 顶部、右侧、底部和左侧属性用于 position 元素。

视口（来自这个答案）

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

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