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% дает высоту экрана устройства, а не родителя. Не таблицами же теперь верстать из-за этого..

Но это же костыль. Потом всем остальным блокам давать 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, если не нужно сжатия блоков) и не забудь, чтобы у дочерних элементов была указана ширина. Для меня такой способ сработал

Источник

How to Make a Fill the Height of the Remaining Space

If you need the content to fill the height of the full screen, you’re in the right place.

In this snippet, we’ll demonstrate four methods of making a fill the height of the remaining space. So, let’s start!

1. The most usual solution to this problem is to use Flexbox. Let’s see how to use it. For this method, we’ll need the CSS flex property as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

Create HTML

Use a and add three other ellements iinside.
Add class attributes to the elements.
Add elements inside the tag.

div class="box"> div class="row header"> p>header (sized to content) p> div> div class="row content"> p>content (fills remaining space) p> div> div class="row footer"> p>footer (fixed height) p> div> div>

Create CSS

Set the height and margin for the and elements.
Set the display to “flex”, and add the flex-flow and height properties for the “box” class.
Set the border for the “box.row”.
Set the flex property for the “row header”, “row content”, and “row footer” classes, separately.

html, body < height: 100%; margin: 0; > .box < display: flex; flex-flow: column; height: 100%; > .box .row < border: 1px dotted #0313fc; > .box .row.header < flex: 0 1 auto; > .box .row.content < flex: 1 1 auto; > .box .row.footer < flex: 0 1 40px; >

Example of making a fill the remaining space with Flexbox:

html> html> head> title>Title of the document title> style> html, body < height: 100%; margin: 0; > .box < display: flex; flex-flow: column; height: 100%; > .box .row < border: 1px dotted #0313fc; > .box .row.header < flex: 0 1 auto; > .box .row.content < flex: 1 1 auto; > .box .row.footer < flex: 0 1 40px; > style> head> body> div class="box"> div class="row header"> p>header (sized to content) p> div> div class="row content"> p>content (fills remaining space) p> div> div class="row footer"> p>footer (fixed height) p> div> div> body> html>

Using flexbox, you can switch between rows and columns having either fixed dimensions, content-sized dimensions, or remaining space dimensions. In the example above, we demonstrated how to add an area with fixed height and set the content area for filling the remaining space.

Let’s extend our example and add a container div after the box div.

div class="box"> div class="box-container"> /* add this line */ div class="row header"> p>header (sized to content) p> div> div class="row content"> p>content (fills remaining space) p> div> div class="row footer"> p>footer (fixed height) p> div> div> /* end of box-container div */ div>

As we see, our layout’s broken!

The solution’s pretty simple. We should change the default behaviour of div tags, which is setting the display to be a block-level element. We will use the display: contents , so the contents will determine the size of the element.

.box-container < display: contents; >

Here’s the result, same as before:

Let’s take a step further by adding an image in our box-container and seeing what happens.

head> title>Title of the document title> style> html, body < height: 100%; margin: 0; > .box < display: flex; flex-flow: column; height: 100%; > .box .row < border: 1px dotted #0313fc; > .box .row.header < flex: 0 1 auto; > .box .row.content < flex: 1 1 auto; > .box .row.footer < flex: 0 1 40px; > .box-container < display: contents; > style> head> body> div class="box"> div class="box-container"> div class="row header"> p>header (sized to content) p> img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg" height="150px" width="150px" /> div> div class="row content"> p>content (fills remaining space) p> div> div class="row footer"> p>footer (fixed height) p> div> div> div> body>

It seems like it’s still working, great! So all we had to do was to place display: contents to our box-container div .

2. Another way of making a fill the remaining space is to use the CSS position property. Just set the position to “absolute” to stretch the .

Example of making a fill the remaining space with the position property:

html> html> head> title>Title of the document title> style> html, body < height: 100%; width: 100%; margin: 0; > #fixed-height < height: 100px; background-color: #57c975; > #remaining-height < background-color: #d9deda; position: absolute; top: 100px; bottom: 0; width: 100%; > style> head> body> div id="fixed-height"> Fixed height div> div id="remaining-height"> Remaining height div> body> html>

3. The next method of making a fill the remaining space is using tables. By setting the display property to “table”, we can distribute the given space. When we set a fixed height for one element, the other will use the remaining space.

html> html> head> title>Title of the document title> style> html, body < height: 100%; width: 100%; margin: 0; > #fixed-height < height: 100px; background-color: #57c975; > #remaining-height < background-color: #d9deda; position: absolute; top: 100px; bottom: 0; width: 100%; > style> head> body> div id="fixed-height"> Fixed height div> div id="remaining-height"> Remaining height div> body> html>

Example of making a fill the remaining space with the display set to «table»:

html> html> head> title>Title of the document title> style> html, body, #outer < height: 100%; width: 100%; margin: 0; > #outer < display: table; > #fixed-height < height: 100px; background-color: #ebcaca; display: table-row; > #remaining-height < background-color: #ebe6e6; display: table-row; > style> head> body> div id="outer"> div id="fixed-height"> Fixed height div> div id="remaining-height"> Remaining height div> div> body> html>

4. The last method is to use the CSS calc() function. In this way, we can assign a height calculated from the total height minus the height of the other element.

Example of making a fill the remaining space with the calc() function:

html> html> head> title>Title of the document title> style> html, body < height: 100%; width: 100%; margin: 0; > #fixed-height < height: 100px; background-color: #ebcaca; > #remaining-height < background-color: #ebe6e6; height: calc(100% - 100px); > style> head> body> div id="fixed-height"> Fixed height div> div id="remaining-height"> Remaining height div> body> html>

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник