Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
Виетор
5 / 5 / 3
Регистрация: 01.03.2013
Сообщений: 199
1

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

16.07.2013, 18:28. Просмотров 689. Ответов 7
Метки нет (Все метки)

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

У меня полчучилось вот что:
Кликните здесь для просмотра всего текста
Растягивание тега div

При заполнении текстом желтой области, контейнер растягивается, а нужно, что бы вместе с желтым растягивался и родительский, и все котейнеры содержащиеся в нём.
И подскажите как в 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 тегами, пол-инета излазил и практически ничего доступного не нашёл.

0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.07.2013, 18:28
Ответы с готовыми решениями:

Родительский div реагирует на растягивание дочерних. Дочерние растягиваються в ответ по всему div
Здравствуйте. Есть вопрос с которым долго-долго ломаю мозг и даже не знаю...

Растягивание div'а
вот я создал див и прочее, оформил как бокс..как сделать, чтобы он сначала был...

Позиционирование и растягивание блоков div
Ребят есть один блок в котором лежит другой. Во втором я пишу информацию и всё...

Синхронное растягивание по вертикали 3х колонок состоящих из div
Проблема с синхронным растягиванием по вертикали 3х колонок состоящих из div,...

Растягивание блоков DIV при уменьшении разрешения (без @media)
Здравствуйте, товарищи. Подскажите, пожалуйста, можно ли без @media запросов...

7
Forastero
558 / 335 / 87
Регистрация: 15.05.2013
Сообщений: 811
Записей в блоге: 1
16.07.2013, 19:31 2
В первом макете нет ничего сложного. Просто блоки расположенные друг за другом.

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 из них точно лишние.
Вы этими блоками хотели отступы задать что ли? Если объясните что нужно сделать - подсоблю.
1
Миниатюры
Растягивание тега div  
Виетор
5 / 5 / 3
Регистрация: 01.03.2013
Сообщений: 199
16.07.2013, 19:44  [ТС] 3
Во втором макете вот что:
-шапка
-1-й столбец для контента
-2-й стобец для контента (1-й и 2-й столбцы должны визуально разделяться полоской или чем либо ещё)
-3-й футер
И всё это находиться в одном большом блоке.

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

Корче говоря должно быть так, как на картинке
0
Миниатюры
Растягивание тега div  
Forastero
558 / 335 / 87
Регистрация: 15.05.2013
Сообщений: 811
Записей в блоге: 1
16.07.2013, 20:00 4
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
0
Миниатюры
Растягивание тега div  
Виетор
5 / 5 / 3
Регистрация: 01.03.2013
Сообщений: 199
16.07.2013, 20:07  [ТС] 5
Спасибо, но проблема с растягиванием осталась. (в красный контейнер запихнул текст, растягивания не произошло, а ведь основная проблема в этом)
0
Forastero
558 / 335 / 87
Регистрация: 15.05.2013
Сообщений: 811
Записей в блоге: 1
16.07.2013, 20:25 6
Совсем забыл. Тогда вот так:

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
0
Виетор
5 / 5 / 3
Регистрация: 01.03.2013
Сообщений: 199
16.07.2013, 20:42  [ТС] 7
Всё растягивается как нужно, кроме жёлтого блока, как сделать что бы он рястягивался в соответсвии с красным?
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. А как происходит растягивание, какая часть кода отвечает за это?
0
Виетор
5 / 5 / 3
Регистрация: 01.03.2013
Сообщений: 199
16.07.2013, 22:59  [ТС] 8
Короче кое-что получилось, но основной блок растягивается не до самого конца, футер тоже не правильно отображается, как исправить?
0
Вложения
Тип файла: rar zach.rar (456.3 Кб, 4 просмотров)
16.07.2013, 22:59
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.07.2013, 22:59

Использование тега <div> для обёртки
Привет всем,я совсем новчиок только вчера начал учить html+ css,и я понял что...

Атрибут main для тега div
Здравствуйте. Гуляя по простором интернета, я наткнулся на Тег &lt;div&gt; c Атрибут...

Центровка текста внутри тега <div>
Доброго времени суток, форумчане! Решил открыть для себя что-то новенькое и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru