Как растянуть контейнер на всю высоту css

Простой способ растянуть блок на всю высоту экрана, или CSS3 Viewport Units

В этой статье я познакомлю вас с появившимися в CSS3 единицами измерения vw, vh, vmin и vmax.

Что такое «Viewport Units»

Viewport Units — это относительные единицы измерения, рассчитывающиеся в процентах от размеров области просмотра браузера. Эти единицы измерения появились в третьей версии спецификации CSS .

Единицы измерения vh и vw

vh и vw можно расшифровать, как viewport height и viewport width — высота и ширина области просмотра соответственно. 1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

Единицы измерения vmin и vmax

vmin и vmax расшифровывается, как viewport minimal и viewport maximal. 1vmin сравнивает значения 1vh и 1vw , выбирая меньшее из них. 1vmax делает то же самое, но выбирает большее из двух значений. Иначе говоря, если у смартфона ширина экрана меньше высоты, то vmin будет рассчитываться относительно ширины, а vmax будет рассчитываться относительно высоты экрана.

Пример использования

Сейчас в тренде использование полноэкранных секций. Особенно часто их используют в лендингах. Есть много способов сделать такую секцию, однако самый простой и изящный способ — применить единицу измерения vh .

section < height: 100vh; /* высота секции равна высоте области просмотра */ >

Поддержка браузерами

Довольно много браузеров поддерживают эти единицы измерения, что не может не радовать. С последними версиями Chrome, Safari, Opera и Firefox проблем нет. IE начиная с девятой версии имеет частичную поддержку. Проблема с мобильными браузерами: Opera Mini вообще не поддерживает эти единицы, Android Browser поддерживает их только с версии 4.4. Ознакомиться с подробной статистикой.

height

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

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

Синтаксис

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

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

    height

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

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

Рис. 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 .

Как заверстать блок во всю ширину окна внутри блока с произвольной шириной

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

Просто рандомная космическая фотка с Ансплеша. Красивенькая.

Ширина основной колонки с контентом при этом абсолютно произвольная и может меняться в зависимости от размеров окна, настроения браузера и фазы луны. Единственное, что про нее достоверно известно — она выровнена по центру:

Самый очевидный способ — прервать блок с контентом, сделать блок без маржинов, затем продолжить контент:

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

div class="text-content">

# Пост!

Бла бла бла-бла бла. Бла бла? Бла бла-бла. 

. бла блабла:

div>

div class="fullwidth"> 
 
div>

div class="text-content">

Бла блаааа бла бла-бла. 

 

div>

А хочется вот так:

# Пост!

Бла бла бла-бла бла. Бла бла? Бла бла-бла. 

. бла блабла:

div class="fullwidth"> 
 
div>

Бла блаааа бла бла-бла.

Окей, вставляем блок в контент и даем ему width: 100vw :

Теперь его надо сдвинуть к левому краю окна. Расстояние неизвестно, но у нас есть ширина блока с контентом ( 100% ) и ширина окна ( 100vw ). Сначала двигаем блок направо с помощью margin-left: 50% :

Теперь блок начинается ровно с середины окна. Отнимаем 50vw , чтобы блок уехал к левому краю. Получается margin-left: calc(50% — 50vw) , блок встает на нужное место:

Стиль блока выглядит так:

.fullwidth  
width: 100vw; 
margin-left: calc(50% - 50vw);
>

Класс, то что надо.

. или нет? А это что за хрень?

Горизонтальный скролл, блин, откуда?

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

А счастье было так близко. Окей, время костылей. Гуглением находится один приемлемый костыль: засунуть в скрипт, который будет класть в css-переменную 1vw здорового человека (то есть без учета ширины скроллбара) и пересчитывать его при ресайзах:

script>
(function ()  
function setVw()  
const vw = document.documentElement.clientWidth / 100; 
document.documentElement.style.setProperty('--vw', `$vw>px`); 
>
 
setVw(); 
window.addEventListener('resize', setVw);
>()); script>

Теперь у нас есть переменная var(—vw) , в которой лежит нужное нам количество пикселей. Но по старой традиции лучше использовать ее с фоллбеком на обычный 1vw , вот так: var(—vw, 1vw) .

В результате стиль блока превращается в.

.fullwidth  
width: calc(100 * var(--vw, 1vw)); 
margin-left: calc(50% - 50 * var(--vw, 1vw));
>

Препроцессоры немного сглаживают эту жесть. Я себе сделал переменную $vw: var(—vw, 1vw) , мой стиль теперь выглядит как-то так:

.fullwidth 
width: calc(100 * $vw) 
margin-left: calc(50% - (50 * $vw))

P.S. Скроллбары на маке

Если вы верстаете на маке, рекомендую включить в настройках системы постоянное отображение скроллбаров: сразу будут видны косяки с горизонтальным (а иногда и с вертикальным) скроллом.

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

Как растянуть страницу по высоте окна браузера?

Есть измененная стандартная тема оформления — Garland.
Но по высоте она не на всю страницу, а как сделать на всю?
что бы футер всегда был прижат к низу страницы, ну только кроме тех случаев когда min-height тому мешает.)
Менял стили в «нужных» местах, даже DOCTYPE менял на менее строгий. все равно
Максимум получилось сделать блок контента высотой ровно с высоту экрана, но это тоже не то, надо то бы изменялась при ресайзе.
Даже не знаю что менять теперь.

Пока что смог победить только непонятную полоску внизу «наполненной» страницы в ФФ. По рецепту.
А как растягивать не наполненные на всю высоту не понял.

Drupal6

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

У меня есть модифицированная тема Garland и одна из многих страниц с малым кол-вом контента. Так же у меня большое разрешение на мониторе и в итоге внизу страницы эта «непонятная область» занимает около 25%-30%, что вери бэд!

Собственно я пытался решить эту проблему с помощью firebug но он эту область вообще не определяет. Выставлял везде (где логично) height: 100% и min-height: 100%;, не дало результатов вообще.

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

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

Могу только выложить пример свёрстанной нужным макаром страницы, под себя портируете сами

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

ДА , было бы здорово.

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

Не думал, что так долго буду решать такую как казалось бы простую проблему. Т.е. не получается сделать высоту контента при малом заполнении сайта на 100%. т.е.нужна верстка примерно такая:

header

content

footer

где header, content и footer по центру определенной ширины. Ну и при малом заполнении контента, контент растягивался на всю высоту экрана. но не получилось даже без хедера и футера растянуть контент определенной шириной на всю высоту экрана. Вот пример того, как я пытался сделать:
код в файле style.css написал:

html <
height : 100% ;
>

body <
margin : 0 ;
padding : 0 ;
color : #000 ;
background-color : #fff ;
min-height : 100% ;
font : 76% Tahoma , Verdana , Arial , Helvetica , sans-serif ;
>
#container <
background-image : url ( ‘images/bg_site.gif’ ) ;
min-height : 100% ;
width : 100% ;
position : absolute ;
text-align : center ;
>
#center_t <
height : 100% ;
width : 1024px ;
background-color : #fff ;
position : relative ;
>

ну и код в page.tpl.php:

div id = «container» >
center > div id = «center_t» > center / div > / center >
/ div >

использовал тему на основе bluemarine. Может кто нибудь сталкивался с такой проблемой и решил ее?)

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

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

Читать:

Как снять заднюю стойку chevrolet lacetti