Резиновый div

@Dimsong · Регистрация: 24.10.2013

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

Добрый вечер, нужна помощь с версткой, а именно задать div-у динамическую высоту, а именно:

HTML5
1
2
3
4
5
6
<div id="site">
   <div id="header"></div>
   <div id="content"></div>
   <div id="dynamic_div"></div>
   <div id="footer"></div>
</div>

общем задача сделать так, что бы div id="dynamic_div" заполнял все свободное пространство на страничке, если оно есть.

@BarbosLV · 29.05.2014, 22:11

Для site задай height =100%

@SKY_NET · 29.05.2014, 22:43

лечше так сделай

HTML5
1
2
3
4
5
6
<div id="site">
   <div class="header"></div>
   <div class="content"></div>
   <div class="dynamic_div"></div>
   <div class="footer"></div>
</div>

и в css задай для site
height: 100%;

@Dimsong · 29.05.2014, 22:46 **[ТС]**

BarbosLV, делал, но остальные div имею статическую свою высоту. Я решил это дело написав скрип, думаю это можно как то css-ом решить, но пока без понятия как.

JavaScript
1
2
3
4
5
6
7
8
            var header = document.getElementById('header').offsetHeight;
            var footer = document.getElementById('footer').offsetHeight;
            var content = document.getElementById('content').offsetHeight;
            var client = window.innerHeight;
            var free = client - (header + footer) - content;
 
            if (free >= 0)
                document.getElementById('dynamic_div').style.height = free;

@BarbosLV · 30.05.2014, 00:04

Ну смотря какого эффекта тебе надо добиться.

HTML5
1
2
3
4
5
6
7
<div class="telo">
<div class="site">
   <div class="header"></div>
   <div class="content"></div>
   <div class="footer"></div>
</div>
</div>

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
.telo{
    width: 500px;
    height: 500px;
    
}
.site{
    width: 100%;
    height: 100%;
    position: relative;
    background:#630;
}
.header{
    width: 100%;
    min-height: 50px;
    background:#100;
}
.content{
    width: 100%;
    min-height: 50px;
    background:#500;
}
.footer{
    width: 100%;
    height: 50px;
    background:#900;
    position: absolute; 
    bottom: 0;
}

Пример

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 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 , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@BarbosLV 368 / 406 / 165 Регистрация: 29.05.2014 Сообщений: 1,494
	29.05.2014, 22:11
	Для site задай height =100% 0