Блок не растягивается на оставшуюся высоту родительского блока

@dalay_lama · Регистрация: 22.09.2012

Студворк — интернет-сервис помощи студентам

Всем доброго времени суток, имеется такая вёрстка:

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>MobileApp</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <div class="container">
            </div>
        </header>
        <section class="slider">
            <div class="container">
            </div>
        </section>
        <section class="main">
            <div class="container">
                <div class="widgets"></div>
                <div class="content"></div>
            </div>
        </section>
        <footer class="footer"></footer>
    </div>
</body>
</html>

Стили:

CSS
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
63
64
65
66
html, body {
    height: 100%;
}
 
body {
    margin: 0;
    padding: 0;
}
 
.wrapper {
    width: 1200px;
    margin: 0px auto;
    min-height: 100%;
    position: relative;
    padding-bottom: 50px;
}
 
.container {
    width: 950px;
    margin: 0 auto;
    height: 100%;
}
 
.header {
    height: 140px;
    width: 100%;
}
 
.slider {
    width: 100%;
    height: 320px;
}
 
.main {
    height: 100%;
}
 
.main .container::after {
    content: " ";
    display: block;
    clear: both;
}
 
.main .widgets, .content {
    height: 100%;
    float: left;
}
 
.widgets {
    width: 312px;
}
 
 
.content {
    width: 608px;
    margin-top: 40px;
    margin-left: 30px;
}
 
.footer {
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
 
}

Проблема в том, что блок main, в котором находится контент, не растягивается до футера, если в нём мало содержимого, т.е. между блоком main и footer появляется "дырка") Подскажите пожалуйста, в чём проблема? как сделать так, чтобы блок main растягивался до футера?

@Fedor92 · 01.05.2015, 13:04

Красноречиво?

Блок не растягивается на оставшуюся высоту родительского блока

@dalay_lama · 01.05.2015, 13:53 **[ТС]**

Fedor92, очень красноречиво) только вот как проблему то исправить? почему height 100% у main не срабатывает?

@Fedor92 · 01.05.2015, 14:04

dalay_lama, а как он по Вашему должен сработать? 100% высоты относительно чего должен быть Ваш блок?

Добавлено через 6 минут
Проблему можно решить, если задать min-height, как вариант...

@dalay_lama · 01.05.2015, 14:11 **[ТС]**

Fedor92, ну относительно wrapper, наверное.....я думал 100% позволит заполнить оставшуюся часть wrapper-а, по крайней мере я так задумывал сделать)
min-height пробовал задать - не помогло

@Fedor92 · 01.05.2015, 14:47

Посмотрите такой код, как вариант:

Кликните здесь для просмотра всего текста

CSS
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
63
64
65
66
67
68
69
70
71
72
html, body {
    width:100%; height:100%; 
}
 
body {
    margin: 0;
    padding: 0;
    border:2px solid
}
 
.wrapper {
    width: 1200px;
    margin: 0px auto;
    min-height:768px;
    height: 100%;
    position: relative;
}
 
.container {
    width: 950px;
    margin: 0 auto;
    height: 100%;
}
 
.header {
    height: 140px;
    width: 100%;
}
 
.slider {
    width: 100%;
    min-height: 40%;
    height:auto;
    border:2px solid blue;
}
 
.main {
    border:2px solid orange;
    min-height: 40%;
    height:auto
}
 
.main .container::after {
    content: " ";
    display: block;
    clear: both;
}
 
.main .widgets, .content {
    height: 100%;
    float: left;
}
 
.widgets {
    width: 312px;
}
 
 
.content {
    width: 608px;
    margin-top: 40px;
    margin-left: 30px;
    word-wrap:break-word;
}
 
.footer {
    height: 50px;
    position: absolute;
    bottom: 0;
    width: 100%;
 
}

Только под блоки высоту допилите...

@dalay_lama · 01.05.2015, 15:10 **[ТС]**

Странно, добавив wrapper-у min-height: 768px и height: 100% у меня страница раза в 2 удлинилась:

а почему именно min-height 768?
не могу понять почему это такая проблема, чтобы блок заполнил оставшееся место?) весь день с этим бьюсь и никак не могу решить эту проблему, плохо мне вёрстка даётся....

@Fedor92 · 01.05.2015, 15:22

Сообщение от dalay_lama

Странно, добавив wrapper-у min-height: 768px и height: 100% у меня страница раза в 2 удлинилась:

Поставьте height:auto; вместо height:100%, как вариант...

Сообщение от dalay_lama

а почему именно min-height 768?

Минимальная высота окна браузера при просмотре его с ПК...

Сообщение от dalay_lama

не могу понять почему это такая проблема, чтобы блок заполнил оставшееся место?)

Укажите фикс высоту для блока и проблемы не будет...)))

Добавлено через 1 минуту
dalay_lama, кстати всё хотел спросить зачем Вам растягивать main? Для фона?

@dalay_lama · 01.05.2015, 15:34 **[ТС]**

Сообщение от Fedor92

Укажите фикс высоту для блока и проблемы не будет...)))

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

Сообщение от Fedor92

кстати всё хотел спросить зачем Вам растягивать main? Для фона?

для того, чтобы это не выглядело так:

то что розовым цветом подсвечено - это окраска wrapper-а, видно, что main не заполняет оставшуюся часть и получается дырка.

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

@Fedor92 · 01.05.2015, 16:04

Сообщение от dalay_lama

то что розовым цветом подсвечено - это окраска wrapper-а, видно, что main не заполняет оставшуюся часть и получается дырка.

Дык это не main шалит...

И чего сразу не спросил?

Попробуйте убрать свойство:

CSS
1
wrapper{padding-bottom:50px}

Может и будет Вам счастье...)))

@dalay_lama · 01.05.2015, 16:09 **[ТС]**

Сообщение от Fedor92

Попробуйте убрать свойство:

Уже убрал - реакции 0

@Fedor92 · 01.05.2015, 16:10

dalay_lama, откуда тогда подложка фиолетовая?

У Вас сайт на хостинге? Если да дайте ссылку...

@dalay_lama · 01.05.2015, 16:11 **[ТС]**

в общем, вот весь шаблон, может так вам проще будет понять в чём косяк
Архив.zip

@Fedor92 · 01.05.2015, 16:26

Desktop.rar

@Fedor92 · 01.05.2015, 17:02

Desktop.rar Попробуйте...

Какой вариант больше подойдёт...

@dalay_lama · 01.05.2015, 17:18 **[ТС]**

Большое спасибо, за то что время тратите

у меня вот так выглядят ваши решения:

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

@Fedor92 · 01.05.2015, 17:33

Не по теме:

dalay_lama, вот кстати, по поводу скрола сам не до конца понял... :) Отталкивайтесь... Удачи, если, что можете мне сразу в лс написать...

@dalay_lama · 01.05.2015, 17:37 **[ТС]**

Fedor92, хорошо, ещё раз спасибо)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	01.05.2015, 13:04
	Красноречиво? 1

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	01.05.2015, 13:53 [ТС]
	Fedor92, очень красноречиво) только вот как проблему то исправить? почему height 100% у main не срабатывает? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	01.05.2015, 14:04
	dalay_lama, а как он по Вашему должен сработать? 100% высоты относительно чего должен быть Ваш блок? Добавлено через 6 минут Проблему можно решить, если задать min-height, как вариант... 1

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	01.05.2015, 14:11 [ТС]
	Fedor92, ну относительно wrapper, наверное.....я думал 100% позволит заполнить оставшуюся часть wrapper-а, по крайней мере я так задумывал сделать) min-height пробовал задать - не помогло 0

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	01.05.2015, 15:10 [ТС]
	Странно, добавив wrapper-у min-height: 768px и height: 100% у меня страница раза в 2 удлинилась: а почему именно min-height 768? не могу понять почему это такая проблема, чтобы блок заполнил оставшееся место?) весь день с этим бьюсь и никак не могу решить эту проблему, плохо мне вёрстка даётся.... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	01.05.2015, 16:10
	dalay_lama, откуда тогда подложка фиолетовая? У Вас сайт на хостинге? Если да дайте ссылку... 0

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	01.05.2015, 16:11 [ТС]
	в общем, вот весь шаблон, может так вам проще будет понять в чём косяк Архив.zip 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	01.05.2015, 16:26
	Desktop.rar 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	01.05.2015, 17:02
	Сообщение было отмечено dalay_lama как решение Решение Desktop.rar Попробуйте... Какой вариант больше подойдёт... 0

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	01.05.2015, 17:18 [ТС]
	Большое спасибо, за то что время тратите у меня вот так выглядят ваши решения: Первый почему-то не до конца экрана растягивается, даже если футер убрать, второй больше подходит, только появляется скролл(футер не видно на экране), хотелось-бы его избежать. Но в любом случае спасибо, вы очень помогли, будет хотя-бы теперь от чего отталкиваться 0

@Fedor92
	01.05.2015, 17:33
	Не по теме: dalay_lama, вот кстати, по поводу скрола сам не до конца понял... :) Отталкивайтесь... Удачи, если, что можете мне сразу в лс написать... 0

@dalay_lama 82 / 82 / 50 Регистрация: 22.09.2012 Сообщений: 495
	01.05.2015, 17:37 [ТС]
	Fedor92, хорошо, ещё раз спасибо) 0

Блок не растягивается на оставшуюся высоту родительского блока

Решение