Как сделать так, чтобы абсолютный элемент автоматически изменял размер родительского элемента? - PullRequest
Новая
       52

Как сделать так, чтобы абсолютный элемент автоматически изменял размер родительского элемента?

2 голосов
/ 29 марта 2020

Мне трудно решить эту проблему :( Я разрабатываю приложение React для обучения.

Базовая c структура моего приложения выглядит следующим образом: 

<body>
 <Component />
 <AnotherComponent />
 <AgainAnotherComponent />
 ...
</body>

Все эти компоненты имеют атрибут css min-heigh: 100vh, чтобы убедиться, что все они имеют высоту устройства.

Внутри одного из этих компонентов у меня есть элемент в положении absolute с атрибутом css heigh: 100%.

Когда родительский компонент этого элемента по умолчанию имеет высоту 100vh, в этом нет ничего плохого, абсолютный дочерний элемент принимает все его родительские высоты.

Но проблема в том, что, когда у родителя есть много содержимого для отображения, и его высота на больше , чем 100vh (150vh например) из-за атрибута min-heigh: 100vh , тогда абсолютный рост ребенка застрял на 100vh.

После нескольких часов исследований и попыток, я надеюсь, что кто-то там поможет мне .. Извините за мой плохой навык engli sh, я надеюсь, что это понятно

мека d ie

EDIT https://antoine-regembal-portfolio.netlify.com Вот веб-приложение, размещенное на Netlify, абсолютным элементом является панель github, расположенная в разделе Projects (справа )

Ответы [ 3 ]

2 голосов
/ 29 марта 2020

Здесь есть две вещи:

  1. Установка height: 100% для дочернего контейнера ограничивает его тем, насколько высокий первый родительский контейнер с position: relative, в данном случае I Предполагаю, ваш min-height: 100vh родительский контейнер. Согласно ответу @ focus.style, top: 0; bottom: 0; будет вести себя точно так же из-за второй точки:

  2. Поскольку ваш дочерний контейнер абсолютно позиционирован, он извлекается из документа течь. Это означает, что, если содержимое вашего дочернего контейнера превышает высоту родительского контейнера, оно не увеличит высоту родительского контейнера.

Сочетание этих двух вещей является причиной ваш ребенок должен оставаться на высоте 100vh.

Если все, что вы хотите, это чтобы ваш ребенок увеличился в росте, попробуйте min-height: 100% вместо height: 100% на дочернем элементе. Тем не менее, пункт 2 выше остается в силе, поэтому родительский контейнер не будет расширяться. Чтобы расширить родительский контейнер, вы должны держать своего ребенка в потоке документов.

Вот краткая демонстрация Codepen: https://codepen.io/samsonzhangthesalmon/pen/rNVPxrj

0 голосов
/ 29 марта 2020

Вот решение, которое сработало для меня, предоставленное focus.style

Ох. И вы пытались сделать это родительским элементом позиции: относительный; ? Это самый важный шаг. -

0 голосов
/ 29 марта 2020

Вместо использования heigh: 100% для дочернего элемента с абсолютным позиционированием, попробуйте использовать 

top: 0px; 
bottom: 0px;

Но в вашем примере это слишком мало информации, чтобы иметь дело с ней. Нужно больше кода.

Или попробуйте это 

.presentation, .projects {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    position: relative;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...