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

DIV на всю высоту родителя?

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

Но это же костыль. Потом всем остальным блокам давать mardin, чтоб они выползли из под этого элемента. Неужели в CSS нет человеческого решения для этого?

@iiil там все ок, спасибо. просто это 2 части по сути одного вопроса — нужна тень от сайдбара в сторону мейнконтента и для этого сайдбар нужно сделать 100% по высоте.

Слева сайдбар, справа мейнконтент. Оба флоат лефт. Если сайдбар сделать абсолютом, то мейнконтент проваливается под него влево. Нужно делать margin-left: 300px. Решение, да, но костыльноватове)

На самом деле свойство height, указанное в %, работает только если для внешнего блока указана высота. Либо для элементов с абсолютным позиционированием. В этом случае нужно указать top 0 и left 0

.fullpage < position: relative; margin: 0px; padding: 0px; max-width: 100%; min-height: 200%; max-height: 200%; overflow: hidden; >#screen_1, #screen_2 < position: absolute; left: 0px; width: 100%; height: 50%; margin: 0px; padding: 0px; >#screen_1 < top: 0px; >#screen_2

fullpage — родительский блок с высотой в 2 экрана (200%), который содержит в себе 2 дочерних блока с высотой по 1 экрану каждый (50% от fullpage). У первого top: 0px и высота 50%, у второго top: 50% (т.к. он идёт встык после первого блока). Таким образом, мы можем задать n-е кол-во блоков-экранов с высотой (100% / n) и точкой top для каждого
for (i = 0; i < n; i++) top[i] = (100% / n) * i;
>
:)))

Да, а ещё в современных браузерах поддерживается такая клёвая адаптивная штука, как vh и vw, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

НО! Эта штука не поддерживается на разных мобильных браузерах и на старых версиях обычных браузеров, так что пока эта штука не такая уж и крутая 🙁

Попробуй задать странице display: flex, а дочерним блокам align-self: stretch (+ flex-shrink: 0, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Источник

Простой способ растянуть блок на всю высоту экрана, или 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 .

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

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

Источник

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

Для того, чтобы растянуть блок на всю высоту видимой части экрана нам понадобится:

Начнем с блока, пусть это будет блок «main»

Теперь перейдем к стилям , удалим у всех элементов все отступы по умолчанию:

Добаим стилей и body и html с высотой «height: 100%;» и «body» добавим

» background-color: #ededeb; » , чтобы его было видно..

Далее перейдем к тому блоку, который должен растянуться на весь экран , ширину сделаем «width: 80%», чтобы наш блок отличался по ширине от «body», и задний фон тоже изменим на » #fff «:

Смотрим на пример растянутого блока на весь экран:

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

Далее возьмем всё, что мы тут понаписали и всё это поместим на отдельную страницу и у нас получится пример с растянутым блоком на всю высоту весь экрана!

Скачать пример растянутого блока на всю высоту экрана.

Удивляет большинство примеров в интернете — все как попугаи копируют и выкладывают информацию у себя на сайте!

И как раз этот вариант — тому пример!

Потому, что у него есть минус! И я его вам покажу.

Как только на странице окажется контента больше чем высота экрана, то данный пример становится » ОТСТОЕМ !»

Пример кривого растянутого блока на всю страницу!

Растягиваем блок на всю высоту страницы.

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

Но если контент превышает видимую часть экрана, то если ваш растянутый блок имеет другой цвет от заднего фона, то это будет явно видно!

Растягиваем блок на всю высоту контента.

На самом деле всё просто! Возьмем тот же пример, что мы использовали выше пунктом.

Вместо высоты блока( main ) на все сто процентов

И сделаем отдельны пример, который будет отличаться только свойством — «min-height».

Пример растянутого блока на всю высоту контента!

Растянуть div по высоте родителя

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

Я могу только предположить.

Предположим, что у нас есть два div со стилями:

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

Изменим высоту внутреннего div на 100%

Внутренний блок растянут на всю высоту родителя. почти, кроме толщины бордюра.

Источник

Как сделать div с height 100% с помощью CSS.

При верстке макетов можно столкнуться с ситуацией, что какой-либо блок, который чаще всего представляет собой колонку макета, нужно растянуть на 100% по высоте экрана монитора.

Сначала решение этой задачи может показаться довольно простой, казалось бы, что нужно задать для блока свойство height со значением 100%.

   
Блок, который должен растянуться на 100% высоты окна браузера
 
  

Но, как видите это свойство не работает. Блок не хочет растягиваться на всю ширину окна браузера.

Как решить эту проблему? Почему не работает свойство height:100%?

Все дело в том, что 100% должны браться от высоты родительского элемента. А какая у нас высота родительского элемента? Для элемента div, в данном примере, этими родительскими элементами являются элементы body и html.

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

Чтобы изменить ситуацию, родительским элементам body и html также нужно добавить свойство height 100%.

Давайте посмотрим, что из этого получиться.

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Источник