Выравнивание блоков двухколоночного резинового макета по высоте через CSS без задания конкретной высоты

@UrthamArRang · Регистрация: 19.03.2015

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

Здравствуйте! Есть страница с двумя колонками. Левая колонка имеет фиксированную ширину, правая должна быть резиновой. Можно ли выровнять эти два блока по высоте, если не задавать им конкретную высоту (не известно, сколько и какого контента будет размещаться на странице)?

Пыталась выравнивать через flow + margin, через display:table - без фиксированной высоты колонки получаются разного размера.

@akmaljon · 19.03.2015, 09:04

Очень известная проблема!!!
Выложи посмотрим!

Комментарий модератора

Правила форума CyberForum.ru

3.4 Избегайте использования слишком большого количества смайлов в сообщениях в тематических разделах форума, а также "кричащего" выделения текста, в том числе CAPS LOCK.

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

@Shakalaka · 19.03.2015, 10:45

HTML5
1
2
3
4
<div id="wrap">
<div id="left">text text text<br /></div>
<div id="right">text text text<br />text text text<br />text text text<br />text text text<br /></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#left{
    background:#ccc;
    width:200px;
    display:table-cell;
}
#right{
    display:table-cell;
    
}
#wrap{
    width:100%;
    display:table;
    background:#00f;
}

@almaz1994 · 19.03.2015, 19:47

Если обернуть в блок и задать высоту для двух колонок в 100%? По логике, если одна колонка растянет родительский блок, то вторая должна будет растянуться на 100% от высоты родительского.
Если нет - то думаю в раздел JS тебе надо) Точно помогут)

@UrthamArRang · 21.03.2015, 10:33 **[ТС]**

Shakalaka, almaz1994, спасибо за подсказку.

Способ с display:table почему-то не работал, когда я применяла display:cell к колонкам, а ширину и прочие свойства - к вложенным в них блокам.

@almaz1994 · 21.03.2015, 15:26

Слушай, тебе только по дизайну надо их выровнять?

Добавлено через 16 секунд
Можно сделать эффект "Равных высот"

Добавлено через 1 минуту
http://www.master-web.info/equ... s-columns/
Вот посмотри. Там все способы.
А по поводу "Левая фиксированная, правая резиновая" - ты думаю разобрался уже)

Добавлено через 5 минут
Если по последнему тоже не разобрался, то сразу бери JS, и для высоты и для этого сделай)

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@UrthamArRang 0 / 0 / 0 Регистрация: 19.03.2015 Сообщений: 2

	Выравнивание блоков двухколоночного резинового макета по высоте через CSS без задания конкретной высоты 19.03.2015, 08:24. Показов 1615. Ответов 5 Метки нет (Все метки) Здравствуйте! Есть страница с двумя колонками. Левая колонка имеет фиксированную ширину, правая должна быть резиновой. Можно ли выровнять эти два блока по высоте, если не задавать им конкретную высоту (не известно, сколько и какого контента будет размещаться на странице)? Пыталась выравнивать через flow + margin, через display:table - без фиксированной высоты колонки получаются разного размера. 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	19.03.2015, 19:47
	Если обернуть в блок и задать высоту для двух колонок в 100%? По логике, если одна колонка растянет родительский блок, то вторая должна будет растянуться на 100% от высоты родительского. Если нет - то думаю в раздел JS тебе надо) Точно помогут) 1

@UrthamArRang 0 / 0 / 0 Регистрация: 19.03.2015 Сообщений: 2
	21.03.2015, 10:33 [ТС]
	Shakalaka, almaz1994, спасибо за подсказку. Способ с display:table почему-то не работал, когда я применяла display:cell к колонкам, а ширину и прочие свойства - к вложенным в них блокам. 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	21.03.2015, 15:26
	Слушай, тебе только по дизайну надо их выровнять? Добавлено через 16 секунд Можно сделать эффект "Равных высот" Добавлено через 1 минуту http://www.master-web.info/equ... s-columns/ Вот посмотри. Там все способы. А по поводу "Левая фиксированная, правая резиновая" - ты думаю разобрался уже) Добавлено через 5 минут Если по последнему тоже не разобрался, то сразу бери JS, и для высоты и для этого сделай) 0