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

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
Это было полезно?

Решение

  

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

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

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

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

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

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

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

div {
    height:100vh; 
}

Подробнее о здесь.

Другие советы

Вам нужно установить высоту на <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>

Ответ

Бобинса позволит вам узнать, в каких случаях " высота: 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- для-видео

Вы можете использовать 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>

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

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

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

min-height: calc (100vh - 246px);

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

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

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

корпус {высота: 100vh}

vh расшифровывается как высота видового экрана

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top