Есть ли способ расширить высоту div на всю веб-страницу с помощью css? Я не использую .height { height:100%; } Но это будет распространяться только на высоту содержимого внутри div. Div должен…

Есть ли способ, которым я мог бы установить элемент DIV, чтобы он занимал всю высоту страницы? Что-то вроде: div.left { height: 100%; width: 50%; background-color: blue; position: absolute; top: 0;…

У меня есть боковая панель CSS, которая будет отображать ссылки на моем сайте. Однако он не заполняет всю высоту страницы так, как я хочу. Как я могу заставить это работать? JSFiddle:…

Я разрабатываю веб-сайт с использованием css и html. Мне удалось получить панель навигации в левой части моей страницы, используя этот css, однако при прокрутке экрана вниз панель навигации больше…

У меня есть следующий элемент заголовка определенными: <div class=header> <div class=row> <div class=col-md-8 col-xs-12> <h4 class=heading>Heading info here</h4>…

У меня есть навигационный div слева от моей страницы. Я хочу, чтобы он занимал всю высоту страницы. Ниже приведены html и css для структуры. #wrapper{ position: relative; min-height: 100%; height:…

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

У меня есть вот что: http://jsfiddle.net/s75ew662/7 / Как растянуть левую боковую панель (серую) на всю высоту страницы? .container { width: 750px; margin: 0 auto; } .sidebar { width: 200px;…

У меня есть это HTML: <div> <span></span> <textarea></textarea> </div> Промежуток может занимать одну или несколько строк (в зависимости от текста и размера Div)….

Я пытаюсь создать два столбца <div> , p во всю высоту страницы. Слева я пытаюсь создать два столбца <div> , оба <div> занимают всю высоту страницы. LeftI я пытаюсь создать два…

Div на всю высоту экрана

Ширина и высота экрана на CSS

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

1. position: fixed; . Пример: онлайн линейка.
2. единиц vw и vh
3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому. Для того, чтобы элемент имел min-height: 100%; , должна быть указана height его родителя.

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.

Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:

Картинка на весь экран CSS

Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.

Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.

Вопрос по CSS . Задача: есть высокий блок-контейнер, он по высоте не помещается на один экран (например, div , в котором много параграфов), надо задать фон этому блоку-контейнеру, чтобы он был закрашен полностью.

Нашел вот такое решение: задать всем блокам-родителям height: 100%; , а блоку-контейнеру задать min-height: 100%; . Вот пример:

Не понимаю, почему это работает. Похоже на «шаманство». min-height задает минимальную высоту. Получается, что минимальная высота содержимого дива равна 100% высоты содержимого div . Посмотрел в devtools, выяснилось, что div может быть по высоте больше, чем body и html .

2 ответа 2

Почему это работает?

Потому что div просто переполняет (вылазит за границы) body и всё. Задавая overflow: hidden; для body мы увидим, что div просто обрезается (если высота экрана небольшая).

Как с этим быть?

Это задавание height: 100%; блокам всех уровней вложенности довольно неудобно. Задайте просто нужному вам блоку min-height: 100vh; , где vh — единицы высоты экрана. У body тогда будет по умолчанию height: auto; и body просто будет подстраиваться под содержимое.

Работу min-height: 100% можно понять на примере с установкой прилипающего футера. При этом есть стили:

При этом min-height: 100% работает ТАК:

Если СОДЕРЖИМОГО МАЛО у блока content , то его высота МИНИМАЛЬНО равна 100% высоты вьюпорта ( wrapper – это 100% от высоты body , body – это 100% от высоты html , а html – это 100% от высоты viewport ). При этом у блока content есть нижний paddind -буфер отрицательный, а у блока блока footer есть отрицательный margin , который позволяет в случае, когда много содержимого, «наползти» на этот padding -буфер.

Если же содержимое НЕ ВЛЕЗАЕТ на экран (содержимого МНОГО в блоке content ), то высота определяется содержимым – содержимое растягивает.

Еще раз повторю, чтобы все запомнили – если содержимого мало, высота блока равна высоте вьюпорта (это и есть МИНИМАЛЬНОЕ значение высоты, то есть, меньше быть не может, а больше – пожалуйста, если сможешь растянуть содержимым), если много – высота блока БОЛЬШЕ высоты вьюпорта и определяется содержимым, которое на эту высоту и растягивает.

К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты – иначе Google AdSense ругается).

Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)

Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):

Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана

Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в . Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом

height | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6. 0+	8.0+	1.0+	3.5+	3.1+	1.0+	1.0+	1.0+

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

Версии CSS

Описание

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <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.

Css блок на всю высоту страницы

Ширина и высота экрана на CSS

Растянуть блок на всю ширину и высоту окна браузера можно с помощью:

1. . Пример: . div { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
2. div { width: 100vw; height: 100vh; }
3. начальной width и height тега html . По умолчанию height любого тега, в том числе html и body , равна его содержимому. Для того, чтобы элемент имел min-height: 100%; , должна быть указана height его родителя.

   If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as «0» (for «min-height») or «none» (for «max-height»). [w3.org ]

Блок шириной на весь экран монитора выровнять по центру окна браузера

У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и .

Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:

Картинка на весь экран CSS

Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.

Код немного доработан, опираясь на статью . Там же написан соответствующий вариант для видео.

Сегодня поговорим о двух распространенных проблемах, с которыми сталкиваются верстальщики при верстке макетов сайтов. Одной из проблем является задача прижатия футера к низу экрана. Суть задачи состоит в том, чтобы при различных разрешениях монитора футер был прижат к низу окна браузера в случае, когда средняя (контентная) часть сайта содержит небольшой объем контента.

Второй актуальной задачей является необходимость растянуть некий внутренний блок на всю высоту контейнера body . Как правило, это требуется для того, чтобы фоновый этого блока рисунок был на всю высоту страницы от верха страницу до футера.

Прижимать, и растягивать будем средствами CSS , можно сюда привлечь java script, но зачем, если это можно сделать проще и элегантнее. Решение подобных проблем за счет ява кода имеет один очевидный недостаток, ява скрипт можно отключить в браузере и верстка поплывет.

Подобные задачи я уже решал раньше, но каждый раз приходилось по новой искать информацию как прижать футер и растянуть блок div, потому, что не понимал сути.

Прижимаем футер к низу страницы.

основной текст сайта

контейнер body имеет серый цвет, внутри него лежит обертка (#wrapper) шириной 200 пикселов, равнение по центру. Внутри обертки последовательно сверху вниз расположены три блока: #header — шапка, розового цвета; #content — содержательная часть сайта с фоном белого цвета; #footer — подвал черного цвета. Высота шапки и подвала принята 50 пикселов. Высота контентной части варьируется по содержимому. Визуально это выглядит следующим образом.

Для начала нужно вынести блок футера за пределы обертки (#wrapper). Затем для контейнеров html, body, #wrapper установить высоту 100% (height: 100%). После этого появится полоса прокрутки, а футер будет расположен ниже видимой части окна браузера.

Чтобы уйти от этого недоразумения, установим для футера отрицательный межблочный отступ по вертикали равный высоте футера (margin:-50px auto; — смещаем вверх на 50 пикс. и выравниваем по центру). Теперь у нас футер наползает на блок обертки и на блок контента в случае если высота соответствует. Сделаем для блока контента внутриблочный отступ снизу 50px, теперь все выглядит красиво.

Пока этот вариант работает в «правильных» браузерах (я проверял в opera, firefox, google chrome и IE 8). В недобраузере ИЕ 6 не проверял работоспособность, в ИЕ 7 по идее должно работать.

основной текст сайта

Как растянуть блок div по высоте родительского блока

UPD: 3.04.2014

Образовался некий, якобы пробел в подаче информации. Попытаюсь заполнить. Суть в том, что в комментах есть замечания на тему что контент не растянут как обещалось. Во-первых в статье нет речи о том, что нужно ратягивать блок контента. Во-вторых в статье блок wrapper растянут на высоту блока body, о чем сказанно в заголовке (как растянуть блок по высоте), что и требовалось доказать. Решать некую универсальную задачу я перед собой не ставил, это в принципе не возможно.

Но чтобы показать вам, что все проблемы решаются покажу как «растянуть» еще и блок контента. Сразу оговорюсь, напрямую в блочной модели невозможно без javaScript расятнуть один блок до другого блока, сделать это можно только на 100% высоту. Без яваскрипта вопрос решается таблицей. Делаете 3 ячейки по вертикали (шапка, контент, подвал). Если ограничить высоту шапки и подвала, а высоту таблицы сделать 100%, то в итоге контентная часть будет просчитываться браузером автоматически.

Я же покажу как закрасить фон блока контента в белый цвет не трогая блок wrapper. Все очень просто, создаем еще один блок вложенный в блок wrapper, назовем его, например wrapper2. Укажем ему высоту 100% и белый фон. Что итребовалось доказать

основной текст сайта

До новых встреч. На закуску как всегда сочное видео на тему экстрим-сплава. Рафтинг на реке Замбези, порог с говорящим названием — «унитаз дьявола».

Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы . Например, у меня есть блок div , который необходимо растянуть, однако все немного сложнее, чем кажется. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы? Сегодня мы попытаемся найти это решение.

Скажем, у вас есть html-файл наподобие такого:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod ….. короче много контента

К нему прилагается CSS:

Body { margin: 0; padding: 0; } #content { background: #EEE; border-left: 1px solid #000; border-right: 1px solid #000; padding: 0 20px 0 20px; margin: auto; font: 1. 5em arial, verdana, sans-serif; width: 960px; height: 100%; }

Что это нам дает, вы можете увидеть перейдя по:

Как вы можете видеть, высота страницы определяется контентом и не растягивается на 100%, несмотря на то, что мы добавили блоку #content свойство height со значением 100% . Как так? Давайте немного поразмышляем об HTML. HTML – это всего лишь куча контейнеров вложенных один в другой. Итак, у нашей страницы сперва идет контейнер html , затем внутри контейнера html лежит контейнер body , ну и, наконец, в body расположен блок с идентификатором content . Когда мы помещаем контент в один из этих блоков, он растягивает этот блок и все другие блоки, содержащие этот блок. Итак, мы растягиваем блок

Добавляя блоку

Чтобы исправить это, нам нужно назначить тегу body свою высоту. Но мы снова столкнемся с той же проблемой, ведь тег body лежит в теге html . Таким образом, чтобы растянуть блок

Html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } #content { background: #EEE; border-left: 1px solid #000; border-right: 1px solid #000; padding: 0 20px 0 20px; margin: auto; font: 1.5em arial, verdana, sans-serif; width: 960px; min-height: 100%; } /* специально для IE */ * html #content { height: 100%; }

И на этом все. Посмотрите demo. Блок с контентом растягивается на всю высоту окна браузера .

Обратите внимание на объявление min-height:100%; : благодаря нему в случае, если контент выходит за пределы окна браузера, фон также будет растягиваться за контентом.

Не забываем и о старых браузерах IE, которые не понимают свойство min-heigt , для них необходимо добавить * html #content {height: 100%;} .

Использованы материалы

Читайте также

html — Как растянуть div на всю высоту с помощью flex

Как упоминалось в других ответах, здесь есть одна основная проблема:

• flex-direction: столбец; , который я добавил к home , чтобы разрешить использование свойств flex вместо height , чтобы . content-wrap заполнял доступное пространство, оставшееся в home

Это сделает стек .search-bar и .content-wrap вертикальным и позволит использовать flex: 1 на .content-wrap , который заполнит оставшееся пространство / высоту.

Итак, даже если вы уже получили ответы, и поскольку некоторые свойства имеют неправильное значение или не нужны, я решил опубликовать ответ, чтобы прояснить внесенные изменения.

См. Мои примечания, сделанные в CSS, для дальнейших разъяснений и того, что я изменил.

Фрагмент стека

  .block {
  ширина: 80%;
  маржа: 0 авто;
  дисплей: гибкий;
  flex-wrap: обертка;
}

.sidebar {
  высота: 600 пикселей;
  ширина: 25%;
  фон: красный;
}

.дома {
  дисплей: гибкий;
  flex-direction: столбец; /*  добавлен  */
  / * flex-wrap: wrap; удалено, не нужно * /
  / * align-items: flex-start; удалены, элементы должны заполнять родительские,
                                    в этом измененном случае ширина * /
  ширина: 75%;
  фон: зеленый;
}

. панель поиска {
  / * ширина: 100%; не требуется, по умолчанию для столбца
                                    элемент должен заполнить родительскую ширину как
                                    его "align-items" равно "stretch" * /
  отступ: 25 пикселей;
  фон: синий;
}

.content-wrap {
  гибкость: 1; / * добавлено, забираем оставшееся место слева
                                    слева от своего родителя (в данном случае высота) * /
  дисплей: гибкий;
  flex-wrap: обертка;
  / * ширина: 100%; не требуется, по умолчанию для столбца
                                    элемент должен заполнить родительскую ширину как
                                    его "align-items" равно "stretch" * /

  / * align-items: flex-stretch; неправильное значение, должно быть "растягивать",
                                    хотя, поскольку это значение по умолчанию,
                                    это не нужно * /
}

.содержание,
.Один {
  ширина: 50%;
  фон: желтый;
}  

  

  
 боковая панель 
  

    
 панель поиска 
    

      
 lorem ipsum 
      
 тест 
    
  
  

html — Как сделать div 100% высоты окна браузера

Есть пара единиц измерения CSS 3, называемых:

Что такое длина области просмотра в процентах?

Из связанной рекомендации кандидата W3 выше:

Длина окна просмотра в процентах зависит от размера исходного содержащего блока. Когда высота или ширина исходного содержащего блока изменяется, они соответственно масштабируются.

Эти единицы: vh (высота области просмотра), vw (ширина области просмотра), vmin (минимальная длина области просмотра) и vmax (максимальная длина области просмотра).

Как это можно использовать, чтобы разделитель занимал всю высоту браузера?

Для этого вопроса мы можем использовать vh : 1vh равно 1% от высоты окна просмотра.То есть 100vh равно высоте окна браузера, независимо от того, где находится элемент в дереве DOM:

HTML

CSS

  div {
    высота: 100vh;
}
  

Это буквально все, что нужно. Вот пример JSFiddle, который используется.

Какие браузеры поддерживают эти новые модули?

В настоящее время поддерживается всеми основными современными браузерами, кроме Opera Mini. Проверьте Могу ли я использовать … для получения дополнительной поддержки.

Как это можно использовать с несколькими столбцами?

В случае рассматриваемого вопроса, с левым и правым разделителями, вот пример JSFiddle, показывающий двухколоночный макет, включающий как vh , так и vw .

Чем

Возьмем, к примеру, эту схему:

  <тело>
    

        
 Привет, мир! 
    
 
  

Тег p здесь установлен на высоту 100%, но поскольку он содержит div имеет высоту 200 пикселей, 100% 200 пикселей становится 200 пикселей, не 100% высоты body .Использование 100vh вместо этого означает, что тег p будет на 100% высоты тела независимо от высоты div . Взгляните на этот прилагаемый JSFiddle, чтобы легко увидеть разницу!

CSS Сделать Div в полноэкранном режиме

24,757

Есть несколько способов заставить div занимать весь экран по горизонтали и вертикали.

У меня есть простой элемент div с полем имени класса.

Затем удалите все поля или отступы по умолчанию из тегов html и body.

  html, body {
  маржа: 0px;
}  

height: 100%

Перед тем, как установить для свойства height значение 100% внутри класса .box, обязательно добавьте его в теги HTML и body, в противном случае это не сработает.

Это связано с тем, что когда вы устанавливаете высоту на 100% для элемента, он будет пытаться растянуться до высоты своего родительского элемента.

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

.коробка {
  фон: красный;
  высота: 100%;
}  

✅ Рекомендуется:
Веб-дизайн для начинающих: Кодирование в реальном мире в HTML и CSS

height: 100vh

The. Класс box имеет только 100vh, что составляет 100% высоты области просмотра.

Когда вы устанавливаете высоту на 100vh, элемент коробки будет растягивать свою высоту до полной высоты порта просмотра независимо от его родительской высоты.

Мне не нужно добавлять по горизонтали, поскольку div — это элемент уровня блока, который по умолчанию принимает всю ширину по горизонтали.

  .box {
  фон: красный;
  высота: 100vh;
}  

✅ Рекомендуется :
Создание адаптивных веб-сайтов в реальном мире с помощью HTML5 и CSS3

position: absolute

Вы также можете использовать абсолютное положение, а также настраивать все стороны области просмотра (сверху, справа, снизу, слева ) на 0px заставит div отображать весь экран.

  .box {
  фон: красный;
  позиция: абсолютная;
  верх: 0px;
  вправо: 0 пикселей;
  внизу: 0px;
  слева: 0px;
}  

Вы также можете установить высоту и ширину на 100% вместо установки 0 сверху, справа, снизу и слева.

Один из сценариев, которые я могу придумать для использования свойства position: absolute для создания полноэкранного div, — это когда вы хотите, чтобы фоновый div отображался в полноэкранном режиме для браузера и какой-либо другой div на переднем плане.

✅ Рекомендуется
Полный курс Flexbox: Изучите CSS3 Flexbox в 2020 году

CSS Высота Полная страница: CSS gotcha: Как заполнить страницу с помощью div?

TL; DR

Если вы хотите иметь полностраничный контейнерный div, убедитесь, что у вас есть эти:

  / * заменить браузер по умолчанию * /
html,
тело {
  маржа: 0;
  отступ: 0;
}

/ * использовать единицы измерения, относящиеся к области просмотра, для полного покрытия страницы * /
тело {
  высота: 100vh;
  ширина: 100ввт;
}

/ * включить границу и отступ в ширину и высоту элемента * /
* {
  размер коробки: рамка-рамка;
}

/ * полноразмерный контейнер, заполняющий страницу * /
div {
  высота: 100%;
  ширина: 100%;

  / * пример заполнения, размера шрифта, фона и т.  д. * /
  отступ: 10 пикселей;
  размер шрифта: 20 пикселей;
  цвет фона: светло-голубой;
}
  

Допустим, вам нужен div, занимающий всю страницу…

  div {
  высота: 100%;
  ширина: 100%;

  размер шрифта: 20 пикселей;
  цвет фона: светло-голубой;
}
  

Что ?! Не работает! Высота по-прежнему занимает только содержимое, но не всю страницу.

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

Можем ли мы просто использовать более «абсолютное» значение, например

  div {
  / * высота: 100% * /
  высота: 865 пикселей; / * текущая высота моего браузера * /
  / *... * /
}
  

Работает . .. пока не изменится размер браузера

Он не адаптируется при изменении размера браузера.

Вы можете использовать для этого JS, но это излишне для того, что мы хотели.

Я упомянул пикселей является «абсолютным», но только в том смысле, что они не относятся ни к чему другому (например, rem и vh). Но реальный размер все равно зависит от устройства. Вот некоторые подробности:

Stack Overflow: действительно ли пиксель CSS является абсолютной единицей?

Родственные юниты спешат на помощь!

Олд скул

  HTML,
тело {
  высота: 100%;
  ширина: 100%;
}

div {
  высота: 100%;
  / *... * /
}
  

Работает! (Полосы прокрутки мы исправим позже)

Установив для и его дочернего элемента высоту 100%, мы достигаем полного размера.

Обратите внимание, что установка только одного из них не будет работать, поскольку процентов всегда относительно другого значения.

В данном случае:

• div — это 100% высота корпуса
• корпус на 100% высота html
• html — это 100% высота области просмотра

Окно просмотра — это видимая область браузера, которая зависит от устройства.

Область просмотра> html > body > div

Например, iPhone 6/7/8 имеет окно просмотра 375×667. Вы можете проверить это в настройках вашего браузера для мобильных устройств.

На данный момент вы можете рассматривать область просмотра как размер или разрешение устройства в пикселях. Но если хотите углубиться:

Media Genesis: размер экрана, разрешение и область просмотра: что все это значит?

новое решение: единицы просмотра

Длины окна просмотра в процентах или Блоки просмотра существуют уже некоторое время и идеально подходят для реагирования на изменение размеров браузера.

• 1 высота окна просмотра ( 1vh ) = 1% высоты окна просмотра
• 1 ширина области просмотра ( 1vw ) = 1% ширины области просмотра

Другими словами, 100vh = 100% высоты области просмотра

100vw = 100% ширины области просмотра

Таким образом, они эффективно заполняют область просмотра устройства.

  HTML,
тело {
  / * высота: 100%; * /
  / * ширина: 100% * /
}

div {
  / * высота: 100%;
        ширина: 100%; * /
  высота: 100vh;
  ширина: 100ввт;
  / *... * /
}
  

Выглядит тоже хорошо! (Полосы прокрутки мы исправим позже)

Как упоминалось в комментариях и , существует известное поведение перехода во время прокрутки при использовании 100vh в мобильных браузерах, что является проблемой, но считается преднамеренным для webkit. Подробности см. По этим ссылкам: Высота области просмотра выше, чем видимая часть документа в некоторых мобильных браузерах и Stack Overflow: CSS3 100vh не является постоянным в мобильном браузере

Как насчет

В то время как height фиксирует длину на 100vh , min-height начинается с 100vh , но позволяет содержимому расширять div за пределы этой длины.Если содержимое меньше указанной длины, min-height не действует.

Другими словами, min-height гарантирует, что элемент имеет как минимум этой длины, и отменяет height , если определено height и меньше min-height .

Для нашей цели иметь дочерний элемент div с полной высотой и шириной, это не имеет никакого значения, поскольку содержимое также имеет полный размер.

Хороший вариант использования min-height — это липкий нижний колонтитул, который выталкивается, когда на странице больше контента. Посмотрите здесь и другие полезные примеры использования vh

.

Fun с единицами просмотра | CSS-уловки

В этом случае мы даже можем сохранить контейнер div относительно размера, как в начале, на случай, если мы передумаем позже.

И при таком подходе мы гарантируем, что все тело нашего DOM занимает полную высоту и ширину независимо от нашего контейнера div.

  кузов {
  высота: 100vh;
  ширина: 100ввт;
}

div {
  высота: 100%;
  ширина: 100%;
  / * высота: 100vh;
  ширина: 100ввт; * /
  / * ... * /
}
  

Хороший способ думать о vh, vw vs % заключается в том, что они аналогичны em и rem

% и em оба относятся к родительскому размеру, тогда как vw / vh и rem оба относятся к «наивысшей ссылке», размеру корневого шрифта для rem и области просмотра устройства для vh / vw.

Но почему полоса прокрутки?

Браузеры имеют поля, отступы и границы по умолчанию для элементов HTML. И что хуже всего, это разные браузеры!

Chrome по умолчанию для имеет поле : 8px

И 100vh + 8px вызывает переполнение, так как это больше, чем область просмотра

К счастью, это довольно легко исправить:

  HTML,
тело {
  маржа: 0;
  отступ: 0;
}

тело {...
  

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

Круто! Теперь у нас есть наш div, заполняющий страницу без полос прокрутки!

Наконец, давайте добавим немного отступов, так как неудобно, что контент находится прямо по краям.

  div {
  отступ: 10 пикселей;
  / * ... * /
}
  

Что ?! Полоса прокрутки вернулась! Что произошло?

box-sizing позволяет определить, включены ли отступы и граница в высоту и ширину div.

По умолчанию content-box из box-sizing не включает отступы и границу в длину, поэтому div становится

• высота = 100% + 10 пикселей * 2
• ширина = 100% + 10 пикселей * 2

который переполняет страницу!

border-box включает отступы и границу, поэтому div остается в наших требуемых размерах:

• высота = 100%
• ширина = 100%

Довольно часто для всех элементов устанавливается значение border-box для единообразного макета и размеров на всех страницах, используя селектор * :

  * {
  размер коробки: рамка-рамка;
}
  

Идеально!

Увидимся в следующем!

auto` · Проблема №1614 · w3c / csswg-drafts · GitHub

Рабочая группа CSS только что обсудила height: stretch, должно вести себя как height: auto , и согласилась со следующими разрешениями: РАЗРЕШЕНО: высота: растягивание ведет себя как выровнять саморастяние, когда это возможно, в противном случае вернуться к автоматическому Полный протокол IRC этого обсуждения topic: height: stretch` должен вести себя как `height: auto` github: https: // github. com // issues / 1614 TabAtkins: ключевое слово stretch определено для … кроме высоты, оно пытается сделать то же самое, за исключением дополнительных ограничений, что высота имеет TabAtkins: эффект заключается в том, что мы поднимаемся вверх по дереву в поисках определенной высоты, и мы просто складываем весь MBP между элементом и предком, по сути пытаясь сделать его как можно большим, не переполняя родительский TabAtkins: это вызывает как минимум два проблемы TabAtkins: 1 что произойдет, если два потомка какая высота растягиваются TabAtkins: 2 секунды проблема, если нет предка с определенной высотой, тогда мы нажимаем ICB, который является высотой экрана TabAtkins : так что сбивает с толку то, что элемент растяжения по высоте в конечном итоге равен одной высоте экрана fantasai: или вы все это съели с помощью MBP TabAtkins: да, MBP также будет вычтен из высоты ICB fantasai: он накапливает их все 901 69 s / whatn / want s / Потомки / потомки TabAtkins: две возможности: растяжение по высоте действует как высота автоматически , а другая возможность — в перемещениях макета, которые позволяют вам установить строка с justify- *? TabAtkins: он дает вам хорошее поведение, когда. .. TabAtkins: он выполняет большую часть того, что на самом деле было запрошено TabAtkins: в режимах макета, где это не имеет смысла, например, блок, он просто становится автоматически … fremy: это не было причиной, по которой это было введено fremy: потому что мы не можем использовать выравнивание, поэтому мы придумали stretch fremy: это не решает проблему, почему мы создали его в первую очередь fantasai: другая проблема fremy: ну ладно, не содержит fremy: nm fantasai: мы хотим получить комментарии от WG по этому поводу, что вы думаете об этом предложении? любые другие идеи, как мы должны интерпретировать растяжение по оси блока. fantasai: мы знаем, как это должно работать с инлайн-осью iank_: … fantasai: у this и contain определенно есть сходства fantasai: contain on something that do not ‘ иметь соотношение сторон будет вести себя как растяжка, поэтому все, что делает растяжка, должно соответствовать этому взаимодействию с contain TabAtkins: мы все равно не полностью определили это fantasai: мы сделали https: // черновики. csswg.org/css-sizing-4/#contain-sizing Россен: вы говорили, что растяжение высоты не будет вести себя так же, как justify-self или align-self, в режимах макета, которые … < tantek> TabAtkins: все виды, нам все равно ….? Rossen: как и ячейки таблицы, он будет действовать как height: auto Rossen: для абсолютного позиционирования … (просто исправляем последний …: Я упоминал, как мы придумали stretch, потому что align: stretch не сработало для изображений с соотношением сторон; fantasai указал, что это было «contain», а не «stretch», хотя оба они похожи) TabAtkins: stretch имеет значение, которое заключается в том, что он заполняет содержащий блок без offsets Флориан:… TabAtkins: есть несколько причин TabAtkins: мы действительно хотим width: stretch, потому что бывают случаи, когда вы хотите вызвать это поведение, но width: auto делает что-то другое Bert: проще ли установить растяжку на полях или отступах? TabAtkins: вы уже можете управлять полем, но установили для них автоматический режим Берт: это, я полагаю, в любом месте, где у вас есть фиксированная высота? TabAtkins: везде где свойства выравнивания. …? Берт: как и в случае с столбцами, у вас есть несколько столбцов, у вас есть высота элементов, но вы не знаете, какой из элементов будет внизу столбцов TabAtkins: can Не делайте этого сейчас, блокируйте поток, но … Берт: Я не хочу устанавливать его по высоте, потому что элемент может быть разбит по столбцам Берт: Я все еще хочу, чтобы он был растянут до низа ( edge), но … Берт: вы можете просто установить растяжение на поле сверху или снизу TabAtkins: мы заставили его работать с полями с помощью…? TabAtkins: акцентируем внимание только на росте: растягивать, есть ли другие идеи? есть возражения? fremy: Вы предлагаете сказать, что в тех случаях, когда … знаете, что вы будете вести себя как align stretch или во всех случаях? astearns: предложение для height: stretch ведет себя как выравнивание высоты растяжения в тех режимах макета, которые определяют выравнивание высоты растяжения и возврата к высоте автоматически, в противном случае s / with . ..? / С flexbox. / fremy: когда у вас вложенная растяжка? когда у вас есть прокручиваемые контейнеры? TabAtkins: не решает ни одну из начальных проблем, например.грамм. два родственных элемента stretch s / align height / align-self / TabAtkins: align self stretch знает, как справиться с самим собой TabAtkins: grid и flexbox знают, как обрабатывать несколько выравниваемых самонастраивающихся элементов TabAtkins: Я не хочу определять функцию, которая вызывает ужасное количество переполнения. TabAtkins: многие варианты использования решаются просто с помощью гибкости или сетки. fremy: тогда почему? TabAtkins: досадно сбивает с толку, если высота и ширина допускают разные ключевые слова, и есть разумное поведение, которое мы можем определить для высоты: stretch TabAtkins: за исключением отсутствия разумного способа определить его для блока fremy : все еще не совсем уверен fremy: бесполезно, но позволяет. ..? TabAtkins: другая его часть. В одном из предыдущих телеконференций обсуждалось, каким должно быть запасное значение для stretch, когда есть максимальная высота, не позволяющая ему быть полной высотой. TabAtkins: вы установили — — align-self … TabAtkins: помогает нам избежать необходимости иметь определенный флаг fremy: ok fair TabAtkins: если знать, как работает height-stretch astearns : какие-либо возражения, имеющие высоту: растягивание по возможности ведет себя как выровнять самостоятельно, иначе вернуться к авто? astearns: не слышу возражений РАЗРЕШЕНО: height: stretch по возможности вести себя как align self stretch, в противном случае вернитесь к auto s / you set — align-self…/ вы устанавливаете height: stretch, а затем просто используйте align-self как обычно, чтобы установить откат /

CSS- Div- Будьте осторожны при выборе размера Div

Первоначально задумывавшийся как простой инструмент для группировки элементов страницы, тег DIV дает дизайнерам дополнительную гибкость и контроль над макетом в сочетании со свойствами каскадной таблицы стилей (CSS).

Дизайнеры используют DIV для создания сложных макетов страниц без использования таблиц.К сожалению, по мере усложнения макетов проблемы совместимости браузеров возрастают.

Проблемы совместимости с ВЫСОТОЙ И ШИРИНОЙ

Рассмотрим одну из самых простых схем: две колонки, расположенные рядом. Один содержит меню навигации, а другой — содержимое страницы. Это кажется идеальным кандидатом для перехода от макета на основе таблицы к макету CSS.

Это имеет смысл: как DIV, так и таблицы могут быть вложенными, иметь атрибуты HEIGHT и WIDTH, содержать границы и т. Д.Однако есть одна большая разница в поведении. Если вы поймете эту проблему, вы сэкономите много времени на отладку. Запишите это:

Ячейки таблицы растягиваются, чтобы соответствовать помещенному в них содержимому, но DIV не могут!

Как и многие другие неприятные проблемы дизайна, основная проблема заключается не в самих правилах CSS, а в том, как браузеры их интерпретируют.

Браузеры Mozilla, Netscape и Opera интерпретируют эти значения как точные измерения и не позволяют значениям DIV HEIGHT или WIDTH выходить за рамки заданных вами.Поэтому, если вы установите свойства HEIGHT и WIDTH для DIV, а затем вставите изображения или текст, которые занимают больше места, на дисплее будет беспорядок.

Internet Explorer гораздо снисходительнее. Он считает значения HEIGHT и WIDTH минимальными значениями и расширяет DIV, чтобы он содержал все необходимое содержимое — точно так же, как ячейка таблицы.

Кто прав? Что ж, Explorer не следует стандартам CSS, выпущенным Консорциумом World Wide Web (W3C), в то время как другие браузеры.Может показаться, что Explorer оказывает вам услугу, но примите во внимание результат, если вы используете абсолютное позиционирование для размещения всех элементов страницы. Если один DIV отображается больше, чем вы ожидаете, другой важный контент может быть скрыт от просмотра!

Сравните дисплеи Explorer и Netscape

Посмотрите на HTML-код ниже. Обратите особое внимание на значения HEIGHT и WIDTH в классах и изображениях в разделе HEAD:

Внутри секции BODY:

Заголовок раздела

материал про счастливого щенка

Заголовок раздела

материал про счастливого щенка

Заголовок раздела

материал про счастливого щенка

Заголовок раздела

материал про счастливого щенка

Обратите внимание, что правило CSS устанавливает WIDTH навигационного DIV равным 125 пикселей, но мы поместили изображение внутри самого DIV шириной 163 пикселей.Также обратите внимание на значения HEIGHT на двух DIV. Для обоих установлено 75% окна браузера, но для DIV навигации может потребоваться больше места.

Вот как это отображается в Explorer 6.0. DIV навигации расширяется вправо и содержит все изображение логотипа Happy Puppy и пункты меню. Обратите внимание на то, что меню DIV выше, чем содержимое DIV.

В Netscape 7.1 отображается весь логотип Happy Puppy, но ширина навигационного DIV не растягивается для его размещения. Вот почему большая часть текста DIV контента перезаписывает изображение логотипа.Высота обоих DIV фиксирована на 75%, поэтому дополнительный контент просто выходит из обоих в пустое пространство ниже.

Ни одна из страниц не выглядит так хорошо, но версия Explorer, по крайней мере, удобочитаема.

Вложенное решение DIV для Explorer

Хотя версия Explorer выглядит лучше, она все же не идеальна. К счастью, это легко исправить, хотя это решение предназначено только для проводника!

Поместите оба DIV в контейнер DIV, который установлен на 100% высоты страницы, и установите оба внутренних DIVS на 100%.Они заполнят контейнер DIV, и высота обоих будет одинаковой.

Измените свойство HEIGHT обоих DIV на 100% и добавьте этот класс стиля в свои правила CSS: .container {height: 100%} , а затем примените его к контейнеру DIV в разделе BODY:

… содержание навигации DIV …

… содержание содержимого DIV .. .

Вот результат в Explorer:

Отображение в Netscape при этом не меняется, но версия Explorer близка к ожидаемой.Если вы уверены, что все (или, по крайней мере, подавляющее большинство) ваших посетителей используют Explorer, это решит вашу проблему. Это отличное решение для макетов без таблиц.

Свойство переполнения

Если вам нужно более кросс-браузерное решение, возможно, свойство OVERFLOW для вас. Стандарт W3C описывает ситуацию так:

«Обычно содержимое блока блока ограничено краями содержимого блока. В некоторых случаях блок может переполняться, что означает, что его содержимое частично или полностью находится за пределами блока… «

Свойство OVERFLOW может иметь одно из четырех различных значений:

Добавление свойства OVERFLOW к обоим DIV сохраняет контент внутри DIV, но также создает ощущение «фрейма», которое может не понравиться ни дизайнерам, ни посетителям.

Когда мы добавляем правило CSS «overflow: scroll» в контейнер DIV, мы получаем это отображение в Netscape 7.1 и Explorer:

Обратите внимание на полосу прокрутки с правой стороны. Содержимое раздела контейнера будет прокручиваться, а навигация останется неизменной. Это действительно создает ощущение «обрамления», но может помочь ориентировать посетителей, если у вас очень длинные страницы.

Сделайте Div 100% высотой окна браузера (или родительского)

Существует несколько современных методов, а также более старый метод, который можно использовать для растягивания любого элемента в соответствии с его родительским (или окном браузера) 100 % по вертикали (то есть 100% высоты). Для наших целей предположим, что у нас есть один элемент

 
  * {
  размер коробки: рамка-рамка;
}

html, body {
  высота: 100%;
}

.высота {
  фон: светло-голубой;
  минимальная высота: 100%;
}
  
 

 
  * {
  размер коробки: рамка-рамка;
}

.высота {
  фон: светло-голубой;
  минимальная высота: 100%;
}
  
 

  html, body {
 высота: 100%;
}  тело {
 дисплей: гибкий;
}  .
No related posts.