Синхронное растягивание по вертикали 3х колонок состоящих из div

@vitalyasn · Регистрация: 23.07.2016

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

Проблема с синхронным растягиванием по вертикали 3х колонок состоящих из div, хотя везде проставил "height: 100%;".
Сраница: http://test.mosmassage.ru/incl... enter2.php
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
109
110
111
112
113
114
115
body {
  width: 98%;
  height: 100%;
  color:#333;
  background: #000000 url('http://mosmassage.ru/img/bg/background.jpg') no-repeat fixed center top;
  font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:0.94em;
  line-height:135%;
  
}
div.Content {
    display: table;
    width: 80%;
    margin-top: 0px;
    margin-left: 7%;
    margin-right: 7%;
    margin-bottom: 0px;
    border: 0px solid white;
}
div.ContentLine {
    display: table-row; 
    width: 80%;
    border: 1px solid white;
} 
div.ContentLR1 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 20%;  
    height: 25px; 
    background-image: url('/img/design/content/left_right/top.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0px solid white;
}
div.ContentMiddle1 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 60%;  
    height: 25px;
    background-image: url('/img/design/content/middle/top.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0px solid white;
}
 
div.ContentLR2 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 20%; 
    height: 100%;
    background-image: url('/img/design/content/left_right/middle-dark.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    border: 0px solid white;
}
div.ContentMiddle2 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 60%; 
    height: 100%;
    background-image: url('/img/design/content/middle/middle-dark.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    border: 0px solid white;
}
div.ContentLR3 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 20%; 
    height: 100%;
    text-align: center;
    background-image: url('/img/design/content/left_right/middle-light.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    border: 0x solid white;
}
div.ContentMiddle3 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 60%; 
    height: 100%;
    text-align: center;
    background-image: url('/img/design/content/middle/middle-light.png');
    background-repeat: repeat-y;
    background-size: 100% 100%;
    border: 0px solid white;
}
div.ContentLR4 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 20%; 
    height: 25px; 
    background-image: url('/img/design/content/left_right/bottom.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0px solid white;
}
div.ContentMiddle4 {
    display: table-cell;
    margin:0 0 0 0;
    float: left;
    width: 60%; 
    height: 25px;
    background-image: url('/img/design/content/middle/bottom.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0px solid white;
}

@mrtoxas · 26.07.2016, 23:18

а .Content поставили 100%?
И зачем вы на таблицах это все делаете?

@vitalyasn · 26.07.2016, 23:45 **[ТС]**

mrtoxas, если там поставить хейт 100%, то вся таблица расширяется на 100% высоты, а надо только место контента чтобы расширялось. Но могу сказать, что при таком варианте, наследуется стиль родителя .Content и 3 колонки расширяются по высоте.
В ContentLine если добавляю, не помогает.
Дивы удобны тем, что их проще выключать в динамичном коде адаптированном под все виды устройств и в случае чего даже менять на другие. <Тейбл> так не получится менять. Или если я не понял Ваш вопрос, подскажите, как по другому. Это первая попытка блочной вёрстки

@mrtoxas · 26.07.2016, 23:55

1. Вы используете блочные таблицы при верстке блоков, хотя надо просто блоками
2. Вы используете однотонную картинку для заливки фона блоков, хоть это делается через стиль background-color.

@vitalyasn · 27.07.2016, 13:33 **[ТС]**

mrtoxas, картинка не однотонная там есть края. Знаю, что влияет на загрузку, но пока я не созрел на усложнение кода. Да, и та самая картинка высотой 4 пикселя. Разберусь с блоками - модернизирую. Спасибо!
Попробую завтра переделать, убрать все display: table; display: table-row; table-cell;

Добавлено через 13 часов 19 минут
решил я центральный блок сделать через <table> не даётся он мне никак в дивах. Думаю, что мне удастся реализовать поставленные цели этим путем.

@mrtoxas · 27.07.2016, 13:34

А что в нем не дается?

@vitalyasn · 27.07.2016, 22:04 **[ТС]**

сколько не пытался дивами получается только так : http://test.mosmassage.ru/incl... enter2.php
Надо три колонки автоматически растягивающиеся на высоту div line при растягивании любой колонки (то есть при добавлении текста другие две колонки должны растягиваться)

Добавлено через 53 секунды
не делаются они у меня одинаковыми

@mrtoxas · 27.07.2016, 23:41

Вот, принцип такой.

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
body {
  background: url([url]http://mosmassage.ru/img/bg/background.jpg[/url]) no-repeat 50% 0/cover;
}
 
.wrapper {
  width: 80%;
  height: 200px;
  margin: 20px auto;
  font-size: 0;
  text-align: center;
}
 
[class^=column-] {
  display: inline-block;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 0.2% 0 0.2%;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  border-top: 2px solid #666666;
  border-bottom: 2px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  &:after {
    font-size: 16px;
    display: block;
    height: 91%;
    content: '';
    background-color: #cdcdff;
    margin: 15px 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px -8px 28px 6px rgba(0, 0, 0, 0.68), 0px 16px 28px -1px rgba(0, 0, 0, 0.68);
    -moz-box-shadow: 0px -8px 28px 6px rgba(0, 0, 0, 0.68), 0px 16px 28px -1px rgba(0, 0, 0, 0.68);
    box-shadow: 0px -8px 28px 6px rgba(0, 0, 0, 0.68), 0px 16px 28px -1px rgba(0, 0, 0, 0.68);
  }
}
 
.column-side {
  width: 20%;
  box-sizing: border-box;
}
 
.column-main {
  width: 58%;
}

HTML5
1
2
3
4
5
<div class="wrapper">
  <div class="column-side"></div>
  <div class="column-main"></div>
  <div class="column-side"></div>
</div>

Результат

@vitalyasn · 28.07.2016, 01:14 **[ТС]**

спасибо за старание помочь. Когда текст вставляю соседние колонки опускаются ниже но не растягиваются

Добавлено через 42 минуты
это принцип создания такого дизайна без картинок это прикольно

@mrtoxas · 28.07.2016, 01:15

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
html,body{
  height:100%;
}
body {
  background: url([url]http://mosmassage.ru/img/bg/background.jpg[/url]) no-repeat 50% 0/cover;
}
.wrapper {
  width: 80%;
  height: 100%;
  margin: 20px auto;
  font-size: 0;
  text-align: center;
}
.column-side {
  width: 20%;
  box-sizing: border-box;
}
 
.column-main {
  width: 58%;
}
 
[class^=column-] {
  text-align:left;
  display: inline-block;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 0.2% 0 0.2%;
  border-radius: 10px;
  padding-top: 30px;
  padding-bottom: 20px;
  box-sizing: border-box;
  font-size: 16px;
  border-top: 2px solid #666666;
  border-bottom: 2px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  overflow: hidden;      
}
 
.col-content{             
    height: 100%;
    margin-left:10px;
    margin-right:10px;        
    box-sizing: border-box;
    background-color: #cdcdff;
    border-radius: 5px;
    padding:5px;
    box-sizing: border-box;
    -webkit-box-shadow: 0px -8px 28px 6px rgba(0, 0, 0, 0.68), 0px 16px 28px -1px rgba(0, 0, 0, 0.68);
    -moz-box-shadow: 0px -8px 28px 6px rgba(0, 0, 0, 0.68), 0px 16px 28px -1px rgba(0, 0, 0, 0.68);
    box-shadow: 0px -8px 28px 6px rgba(0, 0, 0, 0.68), 0px 16px 28px -1px rgba(0, 0, 0, 0.68);
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrapper">
  <div class="column-side">
    <div class="col-content">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim amet possimus, perferendis aliquam in saepe, tempora temporibus provident cupiditate rerum quibusdam iste voluptate? Error ad numquam, quaerat tempore porro eveniet.</span>
    </div>
  </div>
  <div class="column-main">
    <div class="col-content">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias sed aperiam facere obcaecati maiores, illo atque! Tempore soluta veritatis quo maxime similique, in veniam, excepturi dolorum facere minima accusantium consequatur.</span>
    </div>
  </div>
  <div class="column-side">
    <div class="col-content">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab iste aspernatur sequi cumque commodi velit a id sed minima, ullam nam voluptatem doloribus facere, placeat magnam est, eaque illo dolores.</span>
    </div>
  </div>
</div>

Результат

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.07.2016, 23:18
	а .Content поставили 100%? И зачем вы на таблицах это все делаете? 0

@vitalyasn 0 / 0 / 0 Регистрация: 23.07.2016 Сообщений: 18
	26.07.2016, 23:45 [ТС]
	mrtoxas, если там поставить хейт 100%, то вся таблица расширяется на 100% высоты, а надо только место контента чтобы расширялось. Но могу сказать, что при таком варианте, наследуется стиль родителя .Content и 3 колонки расширяются по высоте. В ContentLine если добавляю, не помогает. Дивы удобны тем, что их проще выключать в динамичном коде адаптированном под все виды устройств и в случае чего даже менять на другие. <Тейбл> так не получится менять. Или если я не понял Ваш вопрос, подскажите, как по другому. Это первая попытка блочной вёрстки 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	26.07.2016, 23:55
	1. Вы используете блочные таблицы при верстке блоков, хотя надо просто блоками 2. Вы используете однотонную картинку для заливки фона блоков, хоть это делается через стиль background-color. 1

@vitalyasn 0 / 0 / 0 Регистрация: 23.07.2016 Сообщений: 18
	27.07.2016, 13:33 [ТС]
	mrtoxas, картинка не однотонная там есть края. Знаю, что влияет на загрузку, но пока я не созрел на усложнение кода. Да, и та самая картинка высотой 4 пикселя. Разберусь с блоками - модернизирую. Спасибо! Попробую завтра переделать, убрать все display: table; display: table-row; table-cell; Добавлено через 13 часов 19 минут решил я центральный блок сделать через <table> не даётся он мне никак в дивах. Думаю, что мне удастся реализовать поставленные цели этим путем. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	27.07.2016, 13:34
	А что в нем не дается? 0

@vitalyasn 0 / 0 / 0 Регистрация: 23.07.2016 Сообщений: 18
	27.07.2016, 22:04 [ТС]
	сколько не пытался дивами получается только так : http://test.mosmassage.ru/incl... enter2.php Надо три колонки автоматически растягивающиеся на высоту div line при растягивании любой колонки (то есть при добавлении текста другие две колонки должны растягиваться) Добавлено через 53 секунды не делаются они у меня одинаковыми 0

@vitalyasn 0 / 0 / 0 Регистрация: 23.07.2016 Сообщений: 18
	28.07.2016, 01:14 [ТС]
	спасибо за старание помочь. Когда текст вставляю соседние колонки опускаются ниже но не растягиваются Добавлено через 42 минуты это принцип создания такого дизайна без картинок это прикольно 0

Синхронное растягивание по вертикали 3х колонок состоящих из div

Решение