Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 05.11.2016, 15:05   #1
siavko
 
Регистрация: 05.11.2016
Сообщений: 4
По умолчанию Контроль высоты средней колонки

Здравствуйте.
Прошу помощи в следующей ситуации.
Есть три колонки:

Код:
#leftcol {
    float: left;
    padding-left: 0;
    width: 225px;
}
#rightcol {
    display: block;
    float: right;
    left: 0;
    width: 225px;
}

#maincol {
    margin-left: 225px;
    margin-right: 225px;
    padding: 0;
}



<div id="leftcol">
	<div class="padding">
		блаблабла
	</div>
</div>
<div id="maincol">
	<div style="float:left; min-width:700px;width:100%;">
		<div id="maincolinner" class="inner" style="height: 1331px;">
			<div class="inner_1"> </div> #кусочек рамки
				<div id="maincolinner_" class="padding">
					<table class="blog" cellspacing="0" cellpadding="0">
						блаблабла
					</table>
				</div>
			</div>
		<div class="col-bottom3"></div>	#кусочек рамки
	</div>
</div>
<div id="rightcol">
	<div class="padding">
		блаблабла
	</div>
</div>
<div style="clear: both;"></div>
<div class="clr"></div>
Код выдернул с сайта и мог не все что требуется захватить. Пример на странице http://stalker-zona-tvorchestva.ru/article/1/ а вот пример ломания верстки непросто показать.
Почему так наворочено - когда все делалось - не было нормального верстальщика, а человек, которого нанял переделать все - просто пропал.
Левая и правая - менюшки, рекламки.
Задача в том, что бы средняя была не короче самой длинной из левой-правой.
Т.е. Если контента в средней мало - удлиняем ее, если много - не трогаем.
Решение сделал на JS. При старте в onloade смотрю короче или нет и удлиняю выставлением свойства height.
Все бы было хорошо, но есть страницы,где подгружается редактор ckeditor (он после onload иногда появляется с задержкой) и где добавляются ajax-ом коментарии
- соответственно если середина была короткой и я ее удинил, то при указанных операциях содержимое середины вылазиет за ее границы и получается ужас.
Добавил в JS анализ на появление окна ckeditora - стало лучше, но иногда проскакивает, что ломается верстка.

Вопрос в следующем - чую, что задача уже наверняка возникала и возможно кто-то знает правильное решение.
Если решение непростое, то готов рассмотреть помощь за оплату (в т.ч. через сайт фрилансинга).

Если информации мало - предоставлю все что потребуется.
siavko вне форума Ответить с цитированием
Старый 05.11.2016, 15:37   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Лучше обойтись без JS.
1. Конкретно твой вариант, контент можно пустить в свободное плаванье, а фон/рамки и прочее вынести в отдельные блоки и установить через position: absolute;, решение не очень изящное, но зато рабочее и простое.
2. Есть старый дедовский способ — через таблицы.
3. Ну или flex-box, конечно же.
п.с. Вариантов, конечно овердохрена, но эти 3 — основные, ИМХО.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 05.11.2016, 16:21   #3
siavko
 
Регистрация: 05.11.2016
Сообщений: 4
По умолчанию

Спасибо за ответ.
Но тут есть но.
Все три ровнять не надо - левая и правая - своей высоты, а центральная под них тулится.
При таком раскладе таблица не подходит - все три будут одной длины, а работать надо только со средней.

position: absolute - но ведь рамки то надо вокруг контента рисовать, а когда мне надо подстраивать среднюю колонку - ее то как то подстроить надо под левую или правую (а при этом левая и правая - каждая своей высоты, которую трогать не надо).

flex-box - сейчас буду копать что это такое.

Я не верстальщик и каждый раз когда что-то делаю лезу в мануалы и не могу свободно говорить на тему, просто найти толкового человека в помощь так и не смог, вот сам и копаю.

Может быть задачу непонятно описал....
Есть три колонки - 1,2 (средняя) и 3, высота каждой h1, h2, h3.
Ситуация 1: h1=100 (все в пикселях), h2=50, h3=120
на выходе h1=100, h2=120, h3=120

Ситуация 2: h1=100, h2=150, h3=120
на выходе h1=100, h2=150, h3=120

А проблема, когда h1=100, h2=50, h3=120 я делаю JS h1=100, h2=120, h3=120, потом прорисовывается редактор или добавляется контент и получается, что h2=150, а контент в H2=500.

Сразу извиняюсь, что возможно глупо настаиваю на своем понимании ситуации, просто как писал выше тонкостей не знаю и возможно мыслю немного неправильно - т.е. вижу решение только в JS , а оно в верстке.
siavko вне форума Ответить с цитированием
Старый 05.11.2016, 16:26   #4
siavko
 
Регистрация: 05.11.2016
Сообщений: 4
По умолчанию

flex-box - хорошая штука, но она работает только когда выравниваются все три колонки - тут все хорошо, а когда поведением средней надо управлять относительно боковых, не трогая их высоту - тут не получится применить (мне так кажется.)
siavko вне форума Ответить с цитированием
Старый 06.11.2016, 00:22   #5
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

flex-box — один из сотни инструментов всего лишь, комбинируй...



upd: textarea ресайза ради
Alar, верни репу!

Последний раз редактировалось Naive; 06.11.2016 в 00:32.
Naive вне форума Ответить с цитированием
Старый 06.11.2016, 12:02   #6
siavko
 
Регистрация: 05.11.2016
Сообщений: 4
По умолчанию

Ух-ты какой пример получился!!!
Я знал, что верстка может многое, а сейчас с новыми стандартами она может наверное практически все.
Спасибо за наглядное пособие!!

Сам же пока костыль на яве прикрутил пока нормальное решение не сделаю - постоянно мониторю состояние и выравниваю, когда потребуется.
Коряво - но пока работает.
А пока работает - освою пример и подумаю, как вконопатить красиво.
siavko вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
MSSQL расчет средней стоимости материала ТипичныйСтудент Помощь студентам 27 01.07.2013 12:22
Несколько вопросов средней сложности delphicoding Общие вопросы Delphi 17 14.03.2012 10:42
колонки одной высоты neg5 JavaScript, Ajax 4 13.02.2012 20:20
Блоки div вместо td, как сделать две колонки одинаковой высоты? v.victoria12345 HTML и CSS 0 06.05.2009 18:05
информация о средней температуре. массив felmro Паскаль, Turbo Pascal, PascalABC.NET 1 29.12.2008 21:41