Высота в процентах HTML 5 / CSS - PullRequest
Новая
       20

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

150 голосов
/ 25 октября 2009

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

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

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

Ответы [ 6 ]

342 голосов
/ 26 октября 2009

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

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

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

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

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

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

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

div {
    height:100vh; 
}

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

65 голосов
/ 26 октября 2009

Вам необходимо также установить высоту для элементов <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>
14 голосов
/ 18 июня 2013

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

Вы можете использовать 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>
1 голос
/ 29 ноября 2018

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

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

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

vh обозначает высота области просмотра

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

1 голос
/ 22 ноября 2018

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...