Как скрепить две колонки

@Ваник Хачатрян · Регистрация: 29.10.2013

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

Как мне скрепить контент и левый блок так что бы у них всегда была одинаковая высота, то есть что бы левый блок удлянялся сам под контент.

@Rucklless · 29.03.2014, 10:15

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

@Ваник Хачатрян · 29.03.2014, 11:28 **[ТС]**

Думаю это будет не очень правильно, но логично

@Vladislav WebDev · 29.03.2014, 12:37

Ваник Хачатрян, я вам уже отвечал на этот вопрос, но могу дополнить. Можно сделать так, чтоб наименьший из этих блоков всегда подстраивался под высоту наибольшего из них:

HTML5
1
2
3
4
5
6
7
8
9
<div id="wrapper">
        <div id="left">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, voluptatibus, perferendis optio saepe sunt quibusdam dicta porro accusantium culpa hic odio laboriosam quasi distinctio. Nihil tempora non ab velit at!
        </div><!-- left -->
        <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, asperiores libero reprehenderit natus odit quia recusandae ea accusamus cumque non soluta repellat dolorem deserunt quis blanditiis molestiae quae hic ex ipsum illo quidem perferendis necessitatibus esse autem ipsa! Sunt, maiores, et ullam assumenda repudiandae eius sequi. Velit, voluptas odit ut quidem laudantium vitae voluptatibus consequatur vel cumque numquam rem eos totam exercitationem quos expedita quo magnam earum alias dignissimos doloribus facilis unde ratione atque optio quisquam corporis at molestiae illum pariatur natus maiores aliquid distinctio nostrum enim veniam dolore eaque repudiandae praesentium recusandae officiis delectus possimus error accusamus ipsum asperiores!
        </div><!-- content -->
        <div id="clear"></div>
    </div><!-- wrapper -->

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#wrapper {
    background: #ccc;
    width: 960px;
}
 
#left,
#content {
    width: 50%;
    height: 100%;
    float: left;
}
 
#left {
    background: #098;
}
 
#content {
    background: #089;
}
 
#clear {
    clear: both;
}

JavaScript
1
2
3
4
var wrap = document.getElementById("wrapper");
var left = document.getElementById("left");
var content = document.getElementById("content");
left.style.height = content.style.height = wrap.offsetHeight + "px";

@Ваник Хачатрян · 29.03.2014, 12:41 **[ТС]**

Не получается у меня

@Vladislav WebDev · 29.03.2014, 12:43

Ваник Хачатрян, что именно не получается? Ну у меня же получается

Код в студию тогда.

@Ваник Хачатрян · 29.03.2014, 12:48 **[ТС]**

Стойте ка, получилось!!! Урааа спасибо.

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@Ваник Хачатрян 3 / 3 / 2 Регистрация: 29.10.2013 Сообщений: 230

	Как скрепить две колонки 29.03.2014, 08:49. Показов 1702. Ответов 6 Метки нет (Все метки) Как мне скрепить контент и левый блок так что бы у них всегда была одинаковая высота, то есть что бы левый блок удлянялся сам под контент. Миниатюры 0

@Rucklless 5 / 5 / 2 Регистрация: 25.03.2014 Сообщений: 13
	29.03.2014, 10:15
	расположить блок с контентом в левый блок и сделать ему отступ слева 0

@Ваник Хачатрян 3 / 3 / 2 Регистрация: 29.10.2013 Сообщений: 230
	29.03.2014, 11:28 [ТС]
	Думаю это будет не очень правильно, но логично 0

@Ваник Хачатрян 3 / 3 / 2 Регистрация: 29.10.2013 Сообщений: 230
	29.03.2014, 12:41 [ТС]
	Не получается у меня 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	29.03.2014, 12:43
	Ваник Хачатрян, что именно не получается? Ну у меня же получается Код в студию тогда. 0

@Ваник Хачатрян 3 / 3 / 2 Регистрация: 29.10.2013 Сообщений: 230
	29.03.2014, 12:48 [ТС]
	Стойте ка, получилось!!! Урааа спасибо. 0

Как скрепить две колонки

Решение