Растягивание тега div

@Виетор · Регистрация: 01.03.2013

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

Проблема заключается вот в чём:
Нужно сделать страницу вот такого примерно формата:

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

У меня полчучилось вот что:

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

При заполнении текстом желтой области, контейнер растягивается, а нужно, что бы вместе с желтым растягивался и родительский, и все котейнеры содержащиеся в нём.
И подскажите как в div закрепить нижние контейнеры у нижней границы.
Вот код

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

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
<html>
<head>
<link href="2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="osnova">
 
    <div id="head1-1">
    шапка
    </div>
    <div id="body-gen">
 
        <div id="body1-1">
            1
        </div>
        <div id="body2-2">
            2
        </div>
        <div id="body3-3">
            3
        </div>
        <div id="body-under1-1">
            4
        </div>
        <div id="body-under2-2">
            5
        </div>
        <div id="body-under3-3">
            6
        </div>
        
    </div>
 
</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
67
@charset "utf-8";
 
#osnova {
    background-color: #7FFF00;
    position: absolute;
    width: 870px;
    left: 25%;
    top: 0px;
}
    #head1-1 {
    background-color: #DC143C;
    position: absolute;
    height: 130px;
    width: 840px;
    top: 5px;
    left: 15px;
    right: 15px;
}
#body-gen {
    background-color: #FF8C00;
    position: absolute;
    top: 135px;
    width: 840px;
    left: 15px;
    right: 15px;
}
#body1-1 {
    background-color: #FFFF00;
    position: absolute;
    width: 670px;
    min-height: 500px;
 
}
#body2-2 {
    background-color: #008080;
    position: absolute;
    width: 10px;
    left: 670px;
    min-height: 500px;
}
#body3-3 {
    background-color: #000080;
    position: absolute;
    width: 160px;
    left: 680px;
    min-height: 500px;
}
#body-under1-1 {
    background-color: #800080;
    position: absolute;
    bottom: -500px;
    width: 670px;
}
#body-under2-2 {
    background-color: #80F880;
    position: absolute;
    bottom: -500px;
    width: 10px;
    left: 670px;
}
#body-under3-3 {
    background-color: #8000F8;
    position: absolute;
    bottom: -500px;
    width: 160px;
    left: 680px;
}

Не по теме:

p.s Простите за нубский вопрос, с html знаком всего несколько дней, так что если можно, пишите подробней и попроще.:)
p.p.s. Что-то картинки не вставляются.
p.p.p.s Если можете, киньте ссылку на ресурс, где подробно описываюся действия с div тегами, пол-инета излазил и практически ничего доступного не нашёл.

@Forastero · 16.07.2013, 19:31

В первом макете нет ничего сложного. Просто блоки расположенные друг за другом.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 
  <div class="wrap">
    <header><img src="//placehold.it/978x100&text=HEADER"></header>
    <nav><img src="//placehold.it/978x40&text=NAVIGATION"></nav>
    <div class="content"><img src="//placehold.it/978x400&text=CONTENT"></div>
    <footer><img src="//placehold.it/978x50&text=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
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.wrap {
  width: 980px;
  margin: 0 auto;
  border: 1px solid #333;
}
 
.header {
  height: 100px;
}
 
nav {
  height: 40px;
}
 
.content {
  height: 400px;
}
 
footer {
  height: 50px;
}

А со вторым я маленько не понял. Вам там обязательно нужны именно 6 блоков? 3 из них точно лишние.
Вы этими блоками хотели отступы задать что ли? Если объясните что нужно сделать - подсоблю.

@Виетор · 16.07.2013, 19:44 **[ТС]**

Во втором макете вот что:
-шапка
-1-й столбец для контента
-2-й стобец для контента (1-й и 2-й столбцы должны визуально разделяться полоской или чем либо ещё)
-3-й футер
И всё это находиться в одном большом блоке.

Я же запихнул 1-й и 2-й блоки в ещё один болок + сделал расзделение между ними при помощи ещё одного болока, футер тоже сделал из 3-х блоков...

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

@Forastero · 16.07.2013, 20:00

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="wrap">
    <header></header>
    <div class="content-wrap">
      <aside></aside>
      <div class="content"></div>
    </div>
    <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
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
.wrap {
  width: 980px;
  margin: 0 auto;
  border: 1px solid #333;
}
 
header {
  height: 100px;
  background: #000;
}
 
 
aside {
  float: right;
  height: 500px;
  background: #FEF200;
  width: 250px;
}
 
.content {
  margin-right: 250px;
  border-right: 3px solid #333;
  background: #ED1B24;
  height: 500px;
}
 
footer {
  border-top: 3px solid #333;
  height: 50px;
  background: #00A3E8;
}

Ссылка на песочницу: http://jsbin.com/ixenib/1/edit

@Виетор · 16.07.2013, 20:07 **[ТС]**

Спасибо, но проблема с растягиванием осталась. (в красный контейнер запихнул текст, растягивания не произошло, а ведь основная проблема в этом)

@Forastero · 16.07.2013, 20:25

Совсем забыл. Тогда вот так:

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
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
.wrap {
  width: 980px;
  margin: 0 auto;
  border: 1px solid #333;
}
 
header {
  height: 100px;
  background: #000;
}
 
.content-wrap {
   overflow: hidden;
  display: table;
}
 
aside {
  display: table-row;
  float: right;
  background: #FEF200;
  width: 250px;
}
 
.content {
  display: table-row;
  margin-right: 250px;
  border-right: 3px solid #333;
  background: #ED1B24;
}
 
footer {
  border-top: 3px solid #333;
  height: 50px;
  background: #00A3E8;
}

Песочница: http://jsbin.com/ixenib/3/edit

@Виетор · 16.07.2013, 20:42 **[ТС]**

Всё растягивается как нужно, кроме жёлтого блока, как сделать что бы он рястягивался в соответсвии с красным?

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
* {
  padding: 0;
  margin: 0;
}
 
.wrap {
  width: 980px;
  margin: 0 auto;
  border: 1px solid #333;
}
 
header {
  height: 100px;
  background: #000;
}
 
.content-wrap {
   overflow: hidden;
  display: table;
}
 
aside {
  float: right;                  /* что тут нужно изменить (height: 100% не помогает)*/
  background: #FEF200;
  width: 250px;
}
 
.content { 
  margin-right: 250px;
  border-right: 3px solid #333;
  background: #ED1B24;
}
 
footer {
  border-top: 3px solid #333;
  height: 50px;
  background: #00A3E8;
}

p.s. А как происходит растягивание, какая часть кода отвечает за это?

@Виетор · 16.07.2013, 22:59 **[ТС]**

Короче кое-что получилось, но основной блок растягивается не до самого конца, футер тоже не правильно отображается, как исправить?

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Виетор 5 / 5 / 3 Регистрация: 01.03.2013 Сообщений: 201
	16.07.2013, 19:44 [ТС]
	Во втором макете вот что: -шапка -1-й столбец для контента -2-й стобец для контента (1-й и 2-й столбцы должны визуально разделяться полоской или чем либо ещё) -3-й футер И всё это находиться в одном большом блоке. Я же запихнул 1-й и 2-й блоки в ещё один болок + сделал расзделение между ними при помощи ещё одного болока, футер тоже сделал из 3-х блоков... Корче говоря должно быть так, как на картинке Миниатюры 0

@Виетор 5 / 5 / 3 Регистрация: 01.03.2013 Сообщений: 201
	16.07.2013, 20:07 [ТС]
	Спасибо, но проблема с растягиванием осталась. (в красный контейнер запихнул текст, растягивания не произошло, а ведь основная проблема в этом) 0