Как заставить дочерний элемент / компонент игнорировать размер своего родителя?

Question

Я рендеринг компонента A (полноэкранное наложение) внутри компонента B (заголовок).Я указываю компонент A равным height: 100vh, и это действительно высота моего экрана, только он отталкивается от размера моего заголовка.

Я бы хотел, чтобы он был и высотой, иохватить весь экран, но без указания margin-top: -$(size of my header).

Как я могу это сделать?

Answer 1

Используя свойство position со значением fixed.

Как уже упоминалось в комментариях, вы можете использовать свойство 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
}

Как вы можете видеть, мы теперь постановили, что поле содержимого ребра элемента div с классом componentA должно быть расположено в нулевых точках (сверху, справа, снизу, слева) области просмотра.Если это имеет смысл.

о положении: исправлено; (из w3school )

Элемент с position: fixed; расположен относительнов окне просмотра, что означает, что он всегда остается на том же месте, даже если страница прокручивается.Свойства top, right, bottom и left используются для позиционирования элемента.

viewport (из этот ответ )

Окно просмотра - это часть веб-страницы, которую пользователь может видеть в данный момент.Полосы прокрутки перемещают окно просмотра, чтобы показать другие части страницы.

Чтобы быть более точным, область просмотра не имеет ничего общего с разрешением экрана или размером окна браузера;это относится только к пространству, в котором веб-страница видна пользователю в любой момент времени.