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

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

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

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

здесь содержимое

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

* <
margin: 0;
padding: 0;
>

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

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

body <
height: 100%;
background-color: #ededeb;
>
html <
height: 100%;
>

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

main <
width: 80%;
height: 100%;
margin: 0 auto;
background-color: #fff;
>

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

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

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

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

Скачать данный пример со страницы все скрипты.
У этого варианта растягивания на всю высоту страницы есть — НО !

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

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

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

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

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

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

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

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

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

Как решить эту задачку?

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

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

height: 100%;
» min-height: 100%; »
main <
width: 80%;
height: 100%;
margin: 0 auto;
background-color: #fff;
>

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

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

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

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

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

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

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

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

height: 100%;

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

Блок во всю высоту родителя с учетом высоты экрана

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

1 2 3 4

{ width: 100vh; overflow: hidden; }

— чтобы сделать его высоту равной высоте экрана и скрыть все что за него выходит. Внутри него шапка и блок main.
И не совсем понимаю как мне быть с блоком main, чтобы он занял всю высоту монитора оставшуюся от шапки до низа страницы? 100vh тут не пропишешь, так как он тогда не весь влазит. Писать например 80vh тоже не совсем правильно, так как шапка может измениться и 80vh потом тоже не будет хватать. Наверняка есть способ сказать блоку чтобы он занял все оставшееся место родителя?

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Центральный блок должен растягиваться на всю высоту экрана, а не на высоту контента
Всем привет. Сразу к делу. Сайт делаю резиновым. Структура сайта по сути из трёх блоков. Шапка.

Блок не растягивается на всю высоту экрана
Внутри <div располагается таблица, которая растягивается на всю высоту.

растянуть блок на всю высоту экрана пользователя
почему когда я задаю элементу .first__element — display:flex; элемент перестает растягиваться на.

1665 / 841 / 343
Регистрация: 26.11.2014
Сообщений: 1,719
Записей в блоге: 1

1 2 3 4 5 6 7

body> header>header/header> aside>aside/aside> article>article/article> /main> /body>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

body { display: grid; grid-template-rows: 50px 1fr; height: 100vh; margin: 0; } main { display: flex; } aside { flex-basis: 200px; } article { flex-grow: 1; }

Регистрация: 16.02.2015
Сообщений: 38

Попробовал, но не сработало. Попробую чуть точнее описать, прилагаю картинку рукописную)) Как видно есть шапка, есть боковой блок. Он должен занять всю высоту оставшуюся на странице после шапки. Внутри этого блока есть два элемента: заголовок и меню. Дак вот, меню надо растянуть на всю высоту этого блока оставшуюся после заголовка. И так как меню может содержать много пунктов, там должен появляться скролл для его прокрутки. Ну а прокрутка само собой должна прокручивать только меню, не трогая шапку и не выходя за пределы экрана.

1665 / 841 / 343
Регистрация: 26.11.2014
Сообщений: 1,719
Записей в блоге: 1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

body> header> header /header> aside> p>menu header/p> ul> li>item1/li> li>item2/li> li>item3/li> li>item4/li> li>item5/li> li>item6/li> li>item7/li> li>item8/li> li>item9/li> li>item10/li> li>item11/li> li>item12/li> li>item13/li> li>item14/li> li>item15/li> li>item16/li> li>item17/li> li>item18/li> li>item19/li> li>item20/li> li>item21/li> li>item22/li> li>item23/li> li>item24/li> li>item25/li> li>item26/li> li>item27/li> li>item28/li> li>item29/li> li>item30/li> li>item31/li> li>item32/li> li>item33/li> li>item34/li> li>item35/li> li>item36/li> li>item37/li> li>item38/li> li>item39/li> li>item40/li> li>item41/li> li>item42/li> li>item43/li> li>item44/li> li>item45/li> li>item46/li> li>item47/li> li>item48/li> li>item49/li> li>item50/li> /ul> /aside> /main> /body>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

body { margin: 0; height: 100vh; } header { height: 20%; } main { height: 80%; } aside { width: 30%; display: flex; flex-direction: column; height: 100%; } ul { overflow-y: scroll; }

Блок на весь экран | CSS

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]

html, body < height: 100%; margin: 0; padding: 0; overflow: hidden; >body < overflow: auto; /* добавить полосу прокрутки */ > main

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

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

header, nav, main, footer

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

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

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

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

7 комментариев:

Agent_Smith Полезная штука, спасибо Вам) NMitra Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main. Анонимный С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится NMitra Ничего не поняла 🙂 Приведите пример, пожалуйста. Анонимный о Иван Сафронов не работает данный метод NMitra Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».

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

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

• Вопрос задан более трёх лет назад
• 136576 просмотров

Комментировать
Решения вопроса 1

Инженер и вэб-дизайнер, рисую.

.parent < position: relative; >.child

Ответ написан более трёх лет назад
Нравится 13 9 комментариев
Lici @Lici Автор вопроса

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

Lici @Lici Автор вопроса

@Lici из-под какого из них?

@Lici скажите, что с этим вопросом? Box-Shadow только с одной стороны — как?
Lici @Lici Автор вопроса

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

@Lici сайдбар слева и выше, чем высота видимой части, я так понял?

Lici @Lici Автор вопроса

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

Lici @Lici Автор вопроса
@iiil сделал в итоге блок высотой в 100% вашим меодом и шириной в 1px и от него кинул тень.
Ответы на вопрос 8

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

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Full-stack developer (Symfony, Angular)
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
vitya_yanyk @vitya_yanyk
Адаптивная высота
html:

.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, что есть размеры видимой области окна браузера по высоте и ширине соответственно:

.fullpage < height: 100vh; /*--- 100% от высоты видимой области страницы в браузере ---*/ width: 100vw; /*--- 100% от ширины ---*/ >

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

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
фронтенд-разработчик

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