Блог

Главная - Вопросы по программированию - Реакция: заставить div занимать всю доступную высоту

Реакция: заставить div занимать всю доступную высоту

#css #reactjs #height

#css #reactjs #высота

Вопрос:

Я изо всех сил пытаюсь заставить мой div занимать всю доступную высоту.

Вот моя песочница: https://codesandbox.io/s/htstranslator-n3p04 Проблема заключается в том, что поиск не находит никаких карточек.

Я пробовал flex, flex-grow и т. Д., И ничего не получалось.

Ответ №1:

Установите его как: min-heigh: 100vh; он должен принять его

Редактировать:

Так что это немного сложнее, чем то, как это выглядит на основе вашей структуры html, я бы рекомендовал css следующим образом:

 body, #root, .content{
   min-height: 100vh;
}

Затем, где у вас есть <div class="h-100" , сделайте это как:

 <div class="h-100 d-flex flex-column" style="min-height: 100vh;">

При всех этих настройках он должен выглядеть:
введите описание изображения здесь

Комментарии:

1. Размер меняется с этим свойством, но я изменил заголовок, я допустил ошибку.

2. @AnthonyDa Ты пробовал flex:1 1 auto; или flex-shrink: auto; ??

3. Я пробовал flex: 1 1 автоматически; и flex-grow: 1, но не flex-shrink

4. @AnthonyDa итак, основываясь на том, что вы мне говорите, я понимаю, что вы пытаетесь сделать div cardsContent больше, чем другой. Но сейчас это не кажется плохим. Или о каком div вы говорите? Как вы только что упомянули, » сделайте так, чтобы мой div занимал всю доступную высоту». но поскольку вся ваша структура состоит из div, трудно сказать, какая именно…

5. Да, это тот случай, когда есть карты хорошего размера, но когда нет карт, я хочу, чтобы div занимал все доступное пространство. Попробуйте выполнить поиск карты, которая не существует.