Div высота: html — Как правильно указать высоту div?

Leave a Comment / Разное / By /

height | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяК блочным и заменяемым элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visudet.html#propdef-height

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Если содержимое блока превышает указанную высоту, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте overflow: auto к стилю элемента.

Синтаксис

height: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота элемента вычисляется в зависимости от высоты родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. auto устанавливает высоту исходя из содержимого элемента

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>height</title>
  <style>
   .layer {
    height: 50px; /* Высота блока */
    width: 150px; /* Ширина блока */
    overflow: scroll; /* Добавляем полосы прокрутки */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #333; /* Параметры рамки */
   }
  </style>
 </head> 
 <body> 
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
   euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
  </div> 
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства height

Объектная модель

[window.]document.getElementById(«elementID»).style.height

Браузеры

Браузер Internet Explorer 6 некорректно определяет height как min-height.

В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет высоту элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Размеры

html — Как правильно указать высоту div?

Вопрос задан

5 лет 2 месяца назад

Изменён 5 лет 2 месяца назад

Просмотрен 3k раз

Как правильно задать высоту родительскому block-1 так, чтобы он был минимум 100px, но мог растягиваться при наличии большего в нем контента? При этом, дочерний block-2 должен всегда иметь максимальную высоту.

В настоящем исполнении, либо дочерний не растягивается в высоту на 100px, либо родителю указываем height: 100px; — дочерний растягивается, но теперь родитель у нас лишь на 100px в высоту, и рано или поздно контент вылезает за рамки.

.block-1 {
  background: blanchedalmond;
  padding: 50px 0;
  min-height: 100px;
}

.block-1 .block-2 {
  height: 100%;
  background: azure;
}
<div>
  <div>test</div>
</div>
  • html
  • css

2

Вариант 1 — position: absolute

.block-1 {
  background: blanchedalmond;
  padding: 50px 0;
  min-height: 100px;
position: relative;
}

.block-2 {
  background: azure;
position: absolute;
top: 0;
bottom: 0;
}
<div>
  <div>test</div>
</div>

Вариант 2 — display: flex

. block-1 {
  background: blanchedalmond;
  padding: 50px 0;
  min-height: 100px;
display: flex;
flex-direction: column;
}

.block-2 {
  height: 100%;
  background: azure;
flex-grow: 1;
}
<div>
  <div>test</div>
</div>

Вариант 3 — display: table

.block-1 {
  background: blanchedalmond;
  padding: 50px 0;
  min-height: 100px;
display: table;
width: 100%;
}

.block-2 {
  height: 100%;
  background: azure;
display: table-cell;
}
<div>
  <div>test</div>
</div>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как исправить высоту

спросил

Изменено 7 лет, 9 месяцев назад

Просмотрено 15 тысяч раз

У меня проблема с созданием DIV с фиксированной высотой. Ниже приведен код. Все содержит некоторые другие элементы, кроме #gridDiv . gridDiv будет присоединен к сетке во время выполнения. и я хочу, чтобы gridDiv занимал 60% экрана, независимо от того, есть у него сетка внутри или нет. И если сетка слишком длинная, чтобы поместиться в DIV gridDiv, я бы хотел, чтобы у gridDiv была полоса прокрутки.

В настоящее время gridDiv имеет только встроенную высоту. Как я могу достичь того, чего хочу? Спасибо.

 <дел>
    <дел>
    <дел>
        <дел>
        <дел>
  • HTML
  • CSS

6

Вы всегда можете использовать CSS3 vh (высота области просмотра) unit: #gridDiv{ height:60vh; } . Это сделает

gridDiv 60% области просмотра — несмотря ни на что (на самом деле браузер имеет значение :)).

  • Прежде всего, не используйте встроенный CSS, потому что с ним сложно работать и отлаживать. Если для наглядности — я тоже буду использовать встроенный CSS.
  • Ваш #mainDiv отсутствует высота . Высота относится к высоте родительского элемента.
  • Вероятно, вы не указали высоту документа
  • Если вы глобально не перезаписали состояние отображения DIV , DIV по умолчанию является элементом block -level, поэтому display:block; является избыточным.
  • Ширина DIV полная ширина по умолчанию ( авто ),
 html, body{height:100%; поля:0;}

Для иллюстрации:

 html,
тело{
  высота:100%;
  маржа: 0;
}

дел {
  фон: #ддд;
} 
 <дел>

  <дел>20

  <дел>
    
внутренние 80

    
внутренние 20