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

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

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

Доброго времени суток!
В коде ниже три блока, как три колонки: левый, центральный (основной, более широкий), правый.
Можно ли прописать код так, если это, вообще, возможно, чтобы при увеличении высоты одного из них,-при заполнении текстом, например,-вместе с ним на столько же увеличивались и высоты остальных?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
.lside{width:20%;height:auto;background-color: gray;float:left;}    
.container{width:60%;height:auto;background-color: yellow;float:left;}  
.rside{width:20%;height:auto;background-color: gray;float:left;}    
    </style>
</head>
<body>
    <div class="lside "></div>
<div class="container"></div>
<div class="rside"></div>
</body>
</html>

Qwerty_Wasd · 23.09.2017, 21:56

Fatmarmelad, первое что приходит на ум это flex

HTML5
1
2
3
<div><div class="lside ">bla</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, repellat, accusantium dolores nemo adipisci culpa ipsa facilis, placeat minima natus quo. Doloribus esse blanditiis dicta, illo accusamus molestias quos dolores. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente eos ipsam quisquam temporibus enim et consectetur placeat officiis corrupti, dolorum cupiditate ipsum aliquam iusto facere! Aspernatur facere dolorem unde voluptate?</div>
<div class="rside">bla</div></div>

CSS
1
2
3
4
div{display: flex;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;}
.lside{width:20%;height:auto;background-color: gray;float:left;}    
.container{width:60%;height:auto;background-color: yellow;float:left;}  
.rside{width:20%;height:auto;background-color: gray;float:left;}

@Htext · 23.09.2017, 22:14

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

возможно

Да, вполне. Для этого следует использовать свойство

CSS
1
display:table-cell

Добавлено через 59 секунд

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

flex

Удобное свойство, но оно не работает в старых браузерах. Придется эмулировать его при помощи JS.

Qwerty_Wasd · 23.09.2017, 22:23

Htext,

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

не работает в старых браузерах

много ли людей сегодня их используют?

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

Для этого следует использовать свойство CSS

CSS
1
display:table-cell

- скрин смотрим

Qwerty_Wasd · 23.09.2017, 22:27

на случай выпендрежа IE - пилим отдельный IE.css и в head тянем

HTML5
1
<!--[if IE]><link href="IE.css" rel="stylesheet"><![endif]-->

@Htext · 23.09.2017, 22:34

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

много ли людей сегодня их используют

Важно, что используют. Дискриминацию делать не будем.

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

скрин смотрим

И что?

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

на случай выпендрежа IE - пилим отдельный IE.css и в head тянем

Это уже ближе к теме.

@Fatmarmelad · 24.09.2017, 00:54 **[ТС]**

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

И что?

Увеличилась высота только одной колонки

@mrtoxas · 24.09.2017, 02:21

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

скрин смотрим

Чего же вы в свой код добавили обертку, а в вариант, предложенный Htext - нет

HTML5
1
2
3
4
5
6
7
<div class="wrapper">
  <div class="lside "></div>
  <div class="container">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, sit aspernatur? Vitae sequi dolore nihil cum error libero explicabo? Est at ad doloremque ducimus obcaecati. Omnis labore magnam odio quibusdam.
  </div>
  <div class="rside"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapper {
  display: table-row;
}
.lside, .container, .rside {
  display: table-cell;
}
.lside,.rside {
  width: 20%;
  background-color: gray;
}
.container {
  width: 60%;
  background-color: yellow;
}

Qwerty_Wasd · 24.09.2017, 12:33

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

Чего же вы в свой код добавили обертку, а в вариант, предложенный Htext - нет

вы правы.. не досмотрел. Htext, приношу вам извинения.

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