Как сделать, чтобы родительский блок менял размеры в зависимости от содержимого?

@Fatmarmelad · Регистрация: 20.02.2016

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

Доброго времени суток!
Возник такой вопрос. Как сделать, чтоб родительский блок автоматически изменял размеры при добавлении дочерних блоков?
Ниже приводится код. Добавил

CSS
1
.main{height:auto;.....}

Блок main исчез вообще.
А так, как приводится сейчас, родительскогоdiv хватает толок на 100%, потом он обрывается, и дочерние блоки добавляются уже не в нём.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML>
<html>
<head>
<title>train2
</title>
<style type="text/css">
body{background-color:#5FE168;width:100%;height:100%;position:absolute;margin:0;padding:0;}
.main{background-color:#D36BDF;width:60%;height:100%;left:20%;padding:0;position:absolute;}
.bl{position:relative;background-color:#0909EF;width:80%;height:25%;left:10%;margin-top:3%;margin-bottom:3%;margin-right:0;margin-left:0;}
</style>
</head>
<body>
<div class="main">
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
</div>
</body>
</html>

Qwerty_Wasd · 15.08.2017, 22:59

Fatmarmelad, у вас белиберда с позиционированием, если читать составленные вами стили, переводя на человеческий язык. Если я правильно понял, что вам нужно, предлагаю такой вариант:

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
<div class="main">
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
<div class="bl"></div>
</div>

CSS
1
2
3
4
html,body{width:100%;height:100%;}
body{background-color:#5FE168;text-align:center;}
.main{display:inline-block;background-color:#D36BDF;width:60%;}
.bl{background-color:#0909EF;width:80%;height:80px;margin-top:3%;margin-bottom:3%;margin-left:auto;margin-right:auto;}

И добавляйте

HTML5
1
<div class="bl"></div>

сколько душа пожелает.

@Fatmarmelad · 16.08.2017, 10:19 **[ТС]**

Qwerty_Wasd, спасибо за помощь!
Хотел уточнить пару моментов.
Почему

CSS
1
.main{display:inline-block;

Для чего это делается?

Почему тег html получает размеры, как и body. Он отвечает за окно браузера?
Ещё раз спасибо!

Qwerty_Wasd · 16.08.2017, 19:05

Fatmarmelad,
1. Инлайновые блоки, без указанных явно размеров, принимают размер содержимого. Попробуйте в песочнице следующий пример

HTML5
1
<div>любой объект</div>

CSS
1
div{display:inline-block;border:1px solid red;}

и поиграйте значениями

CSS
1
display

, подставляя попеременно

CSS
1
block,inline,inline-block,inline-table,list-item,run-in,table,table-caption,table-cell,table-column и др.

Посмотрите на поведение блока. Также подставляйте разные объекты в div. Текст, картинка, другой див с содержимым.
2.

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

Почему тег html получает размеры, как и body

не обращайте внимания, для вашего примера ни жарко ни холодно.Объяснять долго. В общем тупанул и забыл убрать. <html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Как сделать, чтобы родительский блок менял размеры в зависимости от содержимого?

Решение