Высота в процентах HTML 5 / CSS

176

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

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

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

html css height

— Д. Струец
источник

3

Вот простое и ясное объяснение heightсвойства CSS с процентными значениями: stackoverflow.com/a/31728799/3597276

— Майкл Бенджамин

решает проблему DOCTYPE: stackoverflow.com/a/32215263/3597276

— Майкл Бенджамин

371

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

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

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

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

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

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

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

div {
    height:100vh; 
}

Смотрите здесь для получения дополнительной информации .

— bobince
источник

Хотя не работает для книжной ориентации экрана stackoverflow.com/questions/23198237/…

— Дхрис

1

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

— MG Developer

69

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

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

— Брайан Кэмпбелл
источник

6

¬_¬ Мне потребовалось 20 минут, чтобы понять, что мне также пришлось установить высоту документа на 100%. Я читаю это слишком поздно, но все же это очень блестяще. вздох

— omninonsense

За это следует проголосовать как за ответ, так как он дает решение для многих людей, которые приходят сюда и задаются вопросом, что можно сделать, больше всего смотрите первый ответ и считают, что это невозможно, и бродите, думая о том, существует ли какой-либо другой метод, не читая этого

— codefreaK

Я согласен, что это правильный ответ, высота не работает, потому что необходимо установить родительский элемент body и html. Этот ответ должен быть принятым ответом.

— MG Developer

Это неправильный ответ - если контент больше, чем умещается по высоте экрана, остальная часть контента больше не видна, поэтому высота НЕ была установлена на 100% окна браузера, а снова на 100%. содержания. Возможно, это не логично, но именно это происходит в двух основных браузерах - Firefox и Chrome - просто попробуйте. Таким образом, принятый ответ является единственным правильным.

— nepdev

15

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

— Олекс Пономаренко
источник

это прекрасно работает Кроме того, он быстро работает в браузере при изменении размера страницы, содержащей более 100 элементов Спасибо!

— Дин Гранде

5

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

— Ахмад Агазаде
источник

4

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

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

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

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

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

— Г-н А. Барик
источник

2

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

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

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

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

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

— Jahmic
источник