Процентная высота HTML 5/CSS

Я пытаюсь установить <div> на определенную процентную высоту в CSS, но он просто остается того же размера, что и содержимое внутри него. Однако, когда я удаляю HTML 5 <!DOCTYTPE html>, он работает, <div> занимает всю страницу по желанию. Я хочу, чтобы страница проверялась, так что мне делать?

У меня этот CSS на <div>, который имеет идентификатор page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}

Ответы

Ответ 1

Я пытаюсь установить div на определенный процентный рост в CSS

Процент того, что?

Чтобы установить процентную высоту, его родительский элемент (*) должен иметь явную высоту. Это довольно очевидно, поскольку если вы оставите высоту как auto, блок займет высоту своего содержимого... но если сам контент имеет высоту, выраженную в процентах от родителя, который вы сделали вы немного поймаете 22. Браузер отбрасывает и просто использует высоту содержимого.

Итак, родительский элемент div должен иметь явное свойство height. Хотя эта высота также может составлять процент, если вы хотите, это просто переводит проблему на следующий уровень.

Если вы хотите сделать высоту div в процентах от высоты видового экрана, каждый предок div, включая <html> и <body>, должен иметь height: 100%, поэтому существует цепочка явных процентных высот вниз к div.

(*: или, если div расположен, "содержащий блок, который является ближайшим предком, который также должен быть расположен.)

В качестве альтернативы, все современные браузеры и IE >= 9 поддерживают новые единицы CSS относительно высоты окна просмотра (vh) и ширины окна просмотра (vw):

div {
    height:100vh; 
}

Смотрите здесь подробнее.

Ответ 2

Вам нужно установить высоту на элементах <html> и <body>; в противном случае они будут достаточно большими, чтобы соответствовать содержимому. Например:

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>

Ответ 3

Ответ bobince даст вам знать, в каких случаях "высота: XX%"; будет или не будет работать.

Если вы хотите создать элемент с установленным отношением (высота:% от его собственной ширины), лучший способ сделать это - эффективно установить высоту с помощью padding-bottom. Пример для квадрата:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

Квадратный контейнер будет просто выполнен из прокладки, и содержимое будет расширяться, чтобы заполнить контейнер. Длинная статья с 2009 года на эту тему: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Ответ 4

Вы можете использовать 100vw / 100vh. CSS3 дает нам относительные единицы. 100vw означает 100% ширины окна просмотра. 100vh; 100% от высоты.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>

Ответ 5

Иногда может потребоваться условно установить высоту элемента div, например, когда весь контент меньше высоты экрана. Установка всех родительских элементов на 100% обрезает контент, когда он длиннее размера экрана.

Итак, способ обойти это - установить минимальную высоту:

Продолжайте позволять родительским элементам автоматически регулировать их высоту. Затем в основном элементе div вычтите размеры пикселов верхнего и нижнего колонтитулов div из 100vh (единиц просмотра). В css что-то вроде:

минимальная высота: calc (100vh - 246px);

100vh - полная длина экрана, за вычетом окружающих элементов. Если установить минимальную высоту, а не высоту, содержимое будет длиннее экрана, а не будет обрезано.

Ответ 6

Привет! Чтобы использовать процент (%), вы должны определить% его родительского элемента. Если вы используете body {height: 100%}, он не будет работать, потому что у его родителя нет процента в высоте. В этом случае, чтобы работать с этим ростом, вы должны добавить это в html {height: 100%}

В другом случае, чтобы избавиться от этого определяющего родительского процента, вы можете использовать

Тело {высота: 100vh}

vh обозначает высоту окна просмотра

Я думаю это поможет