div занимает всю доступную высоту

ProgramBox

div занимает всю доступную высоту

Post author:admin
Запись опубликована:5 ноября, 2022
Post category:Вопросы по программированию

#html #css #reactjs #height

#HTML #css #reactjs #высота

Вопрос:

Я использую следующий HTML

 <div className="App">
    <div className="AppMenu">
        Menu
    </div>
    <div className="AppContainer">
        Test
    </div>
</div>

и этот CSS:

 .App {
  min-height: 100vh !important;
  max-height: 100vh !important;
  height: 100vh !important;
  background-color: red;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  width: 100%;
  font-size: 1.3em;
}

.AppContainer {
  background-color: green;
}

как я могу установить / calc AppContainer size, чтобы принимать всю высоту => 100vh- (AppMenu height)
с помощью CSS (или js)?

1. в чем проблема, с которой вы столкнулись? у вас уже есть 100vh? вы имеете в виду переполнение? Это вызвано полями тела по умолчанию, которые необходимо сбросить. Также для HTML используйте class not className , который является недопустимым HTML.

2. @tacoshy, может быть, автор использует react

3. да, возможно, но в этом случае он должен быть помечен как таковой.

4. Здравствуйте. Вам были даны ответы на ваш вопрос. Пожалуйста, выберите один ответ из многих, которые вам помогли, и отметьте ответ галочкой слева от самого ответа.

Ответ №1:

Вы уже используете полную высоту экрана с. 100vh Нет необходимости использовать подобную ядерную бомбу !important , которая почти всегда просто маскирует проблему, а не решает ее. Также min-height: 100vh; max-height: 100vh; может рассматриваться как плохое кодирование. В этом случае вам нужна определенная высота 100vh, которая выполняется height: 100vh; . Итак, у вас есть 3 строки кода, где вам на самом деле понадобится только 1.

Проблема, связанная с тем, что вы получаете полосу прокрутки и экран переполняется, вызвана полем тела по умолчанию. Элемент будет иметь высоту 100 вч и использовать значение тела по умолчанию amrgin, что приведет к увеличению высоты документа более чем на 100 вч. Для этого просто сбросьте значение тела по умолчанию amrgin на 0 с помощью: body { margin: 0; }

Однако с этим решением у вас возникнет проблема с потенциальным переполнением. Поэтому вы должны либо установить an overflow rule в контейнер, либо использовать min-height вместо этого.

Чтобы AppContainer заполнить оставшуюся высоту, есть несколько способов решить эту проблему. Самым простым способом решить эту проблему было бы использование CSS-Grid с grid-template-rows: min-content auto; помощью . Таким образом, меню будет занимать столько места, сколько необходимо, и будет использоваться остаточная высота AppContainer .

 body {
  margin: 0;
}

.App {
  height: 100vh;
  background-color: red;
  display: grid;
  grid-template-rows: min-content auto;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  font-size: 1.3em;
}

.AppContainer {
  background-color: green;
}

 <div class="App">
  <div class="AppMenu">
    Menu
  </div>
  <div class="AppContainer">
    Test
  </div>
</div>

Развернуть фрагмент

И последнее, но не менее важное. для HTML вы должны использовать class not className , который был бы недопустимым HTML, поскольку этот атрибут не существует.

1. class / className — ошибка, потому что я использую react typescript. В настоящее время AppContainer не принимает всю доступную высоту. Как я могу это решить?

2. Извините, пропустил фактический aprt вопроса. Я обновил свой ответ. Я бы решил это с помощью CSS-Grid, есть несколько решений, но CSS-Grid может сделать это чисто без особого кодирования.

Ответ №2:

Эти строки не имеют никакого смысла. Это можно удалить:

 max-height: 100vh !important;
height: 100vh !important;

Чтобы растянуть .AppContainer до полной свободной высоты, используйте правило flex: 1 :

 .AppContainer {
  ...
  flex: 1;
}

И для .App этого установите flex правила. Вот так:

 .App {
  ... 
  display: flex;
  flex-direction: column;
}

Flex имеет очень хорошую поддержку браузера.

Вам нужен такой результат?

 .App {
  min-height: 100vh !important;
  background-color: red;
  
  display: flex;
  flex-direction: column;
}

.AppMenu {
  background-color: blue;
  position: sticky;
  top: 0px;
  width: 100%;
  font-size: 1.3em;
}

.AppContainer {
  background-color: green;
  
  flex: 1;
}

 <div class="App">
    <div class="AppMenu">
        Menu
    </div>
    <div class="AppContainer">
        Test
    </div>
</div>

Развернуть фрагмент