Какое свойство применить к div контейнеру чтобы он подстраивался под внутренние блоки?

@tesla07 · Регистрация: 07.02.2015

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

Здравствуйте, помогите пожалуйста!
Столкнулся вот с такой проблемой:

Почему при верстке сайта, контейнер в котором лежит левая колонка (left-bar) и правая колона (right-bar) не меняет размер вместе с ними. Внутренние блоки меняют размер в зависимости от количества текста, а задний фон (контейнер) остается неизменным. Его постоянно нужно подгонять.

Какое свойство применить к div контейнеру чтобы он подстраивался под внутренние блоки?

вот css

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
html{
    height: 100%;}
 
body {
    height: 100%;
    width: 100%;
    }
.karkas{
    min-width:1000px; max-width:1000px;margin:0 auto;}
    
    
    .header {
        background:url(%D0%9C%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82/nov.jpg); height:225px; margin:0px 15px 0;}
        
 #menu {
    font-family: "Times New Roman";
    font-size: 100%;
    margin: 0 0px 0px 15px; 
    padding: 0px;
    }
    
#menu li {
    text-transform:uppercase;
    font-family:Georgia;
    font-weight:bold;
    list-style: none;
    float:left;
    height: 33px;
    padding:3px 0 5px;
    margin: 0;
    width: 193px;
    text-align: center;
    background:#b1b9c6;
    position: relative;
    border-left:1px solid #8e8e8e;
    }
#menu li ul {
    list-style: none;
    padding:0;
    margin: 0;
    width: 150px;
    display: none;
    position: absolute;
    left: 44px;
    top: 49px;
    font-size:12px;
    z-index:2;
    }
#menu li ul li {
    padding:1px 0 1px;
    float: none;
    height: 33px;
    margin: -8px 0px 8px -2px;
    width: 150px;
    text-align: center;
    background: #b1b9c6;
    }
#menu li a {
    display:unset;
    width: 150px;
    height: 33px;
    color: #fff;
    text-decoration: none;
    }
#menu li:hover ul, #menu li.jshover ul {
    display: block;
    }
#menu li:hover, #menu li.jshover {
    background: #94a9ca;
    }
#zad{
    background:#baccea;
    width:968px;
    height:100%;
    height:auto !important;
    min-height:100%;
    position:absolute;
    margin:41px 0 5px 15px;
    padding:0 2px 480px 0;
    z-index:0;}
    
#content {
    float: left;
    margin: 22px 292px 0 16px;;
    text-align: justify;
    padding:12px 19px 20px 15px;
    width:634px;
    position:absolute;
    background:#d7e0ef;
    z-index:1;
}
 
 
 
#rightNav  {
    margin:22px 32px 0px 698px;
    padding:12px 5px 15px 11px;
    float: right;
    width: 240px;
    height:auto;
    position:absolute;
    background:#bac3d1;
    z-index:1;
}
#footer{
    height:250px;
    background:#bac3d1;
}

@whiteapps · 07.02.2015, 21:35

tesla07, если честно, не просматривал весь ваш код, но предполагаю что вам поможет

CSS
1
display: table;

и покажите ваш html

@tesla07 · 07.02.2015, 21:42 **[ТС]**

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
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
73
74
75
76
77
78
</head>
 
<body >
<div class="karkas">
     <div class="header">
     </div>
    
     <ul id="menu">
    <li><a href="#">Главная</a></li>
    <li>
        <a href="#">Программы</a>
        <ul>
            <li><a href="#">Тренинг дома</a></li>
            <li><a href="#">Для начинающих</a></li>
            <li><a href="#">На массу</a></li>
            <li><a href="#">Сжигание жира</a></li>
            <li><a href="#">Формирование рельефа</a></li>
            <li><a href="#">Увеличение силы</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Группы мышц</a>
        <ul>  
            <li><a href="#">Грудь</a></li>
            <li><a href="#">Плечи</a></li>
            <li><a href="#">Спина</a></li>
            <li><a href="#">Ноги</a></li>
            <li><a href="#">Бицепс</a></li>
            <li><a href="#">Трицепс</a></li>
            <li><a href="#">Пресс</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Питание</a>
        <ul>
            <li><a href="#">Для набора массы</a></li>
            <li><a href="#">Для сушки</a></li>
            <li><a href="#">Протеин:виды и типы</a></li>
            <li><a href="#">Аминокислоты</a></li>
            <li><a href="#">Витамины</a></li>
            <li><a href="#">Минералы и микроэлементы</a></li>
            <li><a href="#">Клетчатка</a></li>
            <li><a href="#">Калорийность и состав продуктов</a></li>
            <li><a href="#">Расход калорий</a></li>
            <li><a href="#">Гликемический индекс</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Рецепты</a>
        <ul>
            <li><a href="#">Рецепт №1</a></li>
            <li><a href="#">Рецепт №2</a></li>
            <li><a href="#">Рецепт №3</a></li>
        </ul>
    </li>
</ul> 
<div id="zad"> 
        <div id="content"></div>
 
    <div id="rightNav"></div>     
</div>
 
 
<div id="footer"></div>
 
</div>
</body>
<script>
    jsHover = function() {
    var hEls = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0, len=hEls.length; i<len; i++) {
    hEls[i].onmouseover=function() { this.className+=" jshover"; }
    hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
    }
    }
    if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>
</html>

Куда вставлять это свойство?

@Academik · 07.02.2015, 22:47

tesla07, когда используете свойство float, родительский контейнер как бы схлопывается. Одно из решений добавить контейнер, который будет очищать обтекание в нужном месте:

CSS
1
.clr{clear: both;}

HTML5
1
2
3
4
5
<div id="zad"> 
    <div id="content"></div>
    <div id="rightNav"></div>
<div class="clr"></div>
</div>

@tesla07 · 08.02.2015, 18:09 **[ТС]**

Ничего не выходит

@GrizZLY(= · 09.02.2015, 22:11

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

Ничего не выходит

Автор, хоть не так и важно, однако распишите пожалуйста, подробнее, по названию своих классов... что? зачем?куда? и как? и ответ не заставит Вас долго ждать)

@sashok89 · 09.02.2015, 22:14

Попробуйте применить

CSS
1
overflow:hidden;

для своих блоков

@tesla07 · 09.02.2015, 23:41 **[ТС]**

<div id="wraper"> -основной контейнер
<div id="content"></div>- внутренний контейнер контента

<div id="rightNav"></div>-правый контейнер
</div>

<div id="footer"></div>-подвал

css:

#wraper{
background:#baccea;
width:968px;
height:100%;
height:auto !important;
min-height:100%;
position:absolute;
margin:41px 0 5px 15px;
padding:0 2px 480px 0;
z-index:0;}

#content {
float: left;
margin: 22px 292px 0 16px;;
text-align: justify;
padding:12px 19px 20px 15px;
width:634px;
position:absolute;
background:#d7e0ef;
z-index:1;
}

#rightNav {
margin:22px 32px 0px 698px;
padding:12px 5px 15px 11px;
float: right;
width: 240px;
height:auto;
position:absolute;
background:#bac3d1;
z-index:1;

@GrizZLY(= · 10.02.2015, 08:14

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

#wraper{
background:#baccea;
width:968px;
height:100%;
height:auto !important;
min-height:100%;
position:absolute;
margin:41px 0 5px 15px;
padding:0 2px 480px 0;
z-index:0;}

замените на:

#wraper{
background:#baccea;
width:968px;
z-index:0;
overflow:hidden;
margin:0 auto;
}

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

Строка "margin:0 auto" позиционирует родительский блок, чётко по центру, об этом

@tesla07 · 10.02.2015, 11:08 **[ТС]**

Спасибо GrizZLY(=
Все заработало как надо

Новые блоги и статьи Все статьи Все блоги /
Загрузка 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 Решили писать научную статью с неким РОманом

@tesla07 0 / 0 / 0 Регистрация: 07.02.2015 Сообщений: 10
	08.02.2015, 18:09 [ТС]
	Ничего не выходит 0

@tesla07 0 / 0 / 0 Регистрация: 07.02.2015 Сообщений: 10
	09.02.2015, 23:41 [ТС]
	<div id="wraper"> -основной контейнер <div id="content"></div>- внутренний контейнер контента <div id="rightNav"></div>-правый контейнер </div> <div id="footer"></div>-подвал css: #wraper{ background:#baccea; width:968px; height:100%; height:auto !important; min-height:100%; position:absolute; margin:41px 0 5px 15px; padding:0 2px 480px 0; z-index:0;} #content { float: left; margin: 22px 292px 0 16px;; text-align: justify; padding:12px 19px 20px 15px; width:634px; position:absolute; background:#d7e0ef; z-index:1; } #rightNav { margin:22px 32px 0px 698px; padding:12px 5px 15px 11px; float: right; width: 240px; height:auto; position:absolute; background:#bac3d1; z-index:1; 0

@tesla07 0 / 0 / 0 Регистрация: 07.02.2015 Сообщений: 10
	10.02.2015, 11:08 [ТС]
	Спасибо GrizZLY(= Все заработало как надо 0

Какое свойство применить к div контейнеру чтобы он подстраивался под внутренние блоки?

Решение