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

Question

我正在组件 B(标题)内渲染组件 A(全屏覆盖)。我将组件 A 指定为 height: 100vh，它确实是我的屏幕高度，只是它被我的标题的大小压低了。

我希望它既是屏幕的高度又能覆盖整个屏幕，但没有指定 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
}

如您所见，我们现在已规定将具有类 componentA 的 div 的内容框 边缘定位在视口(viewport)的零点(顶部、右侧、底部、左侧)。如果这是有道理的话。

关于位置:固定；(来自w3school)

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

视口(viewport)(来自 this answer)

The viewport is the part of the webpage that the user can currently see. The scrollbars move the viewport to show other parts of the page.

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