Форум hotibo.ru

Сайты - по стандартам, но не стандартные сайты!






Страниц: 1

 

#1 17.02.2014 21:36

Kuzya
Новичок
Зарегистрирован: 15.10.2011
Сообщений: 32

Проблема с 3 DIV'ами (1 тянущийся)

Здравствуйте. Есть у меня на странице 3 div'a помещённые в один общий div.

Код:

В css:
У main стоит width:100%
У col1 и col3 ширина по 100px - это как бы боковые колонки фиксированного размера.
У col1 и col2 float: left, а у col3 - float: right. Это для того чтоб col1 и col3 вставали по краям страницы и col2 занимал всё оставшееся пространство.
Пытаюсь сделать тянущийся col2 и сталкиваюсь со следующей проблемой. Если указывать ему width:100% то он уходит вниз (выползает из-под col1), растягивается на всю страницу и смещает вниз (под себя) col3. Если указывать width: auto то эффект тот же, что и при отсутсвии width - col2 занимает от свободного места ровно столько, сколько нужно его содержимому. То есть не всё свободное пространство, а лишь часть. И между ним и col3 остаётся масса пустого пространства.
Я в вёрстке не силён, поэтому не могу сообразить как выйти из ситуации.
И ещё один момент. Необходимо сделать так, чтоб все 3 div'a были как бы связаны между собой по высоте. То есть как в таблице - если высота одной колонки меняется, меняется высота остальных. Ломал голову долго и додумался лишь поставить main - display: table, а всем col - display: table-cell (пробовал и table-row и всё остальное table-*). Не помогло sad. Может я вообще не в ту сторону копаю?
Буду благодарен за любую помощь и советы.

Отредактированно Kuzya (17.02.2014 21:38)

Нет на форуме

 

#2 18.02.2014 10:17

vashurin
Moderator
Зарегистрирован: 14.09.2010
Сообщений: 291
Вебсайт

Re: Проблема с 3 DIV'ами (1 тянущийся)

Ну вот такой пример: http://pmob.co.uk/temp/3col-sticky- … n-max2.htm решения подойдет?
Если да, то довести до поставленной задачи думаю сможете.

С уважением, Вашурин Владимир.

Нет на форуме

 

#3 18.02.2014 11:08

Kuzya
Новичок
Зарегистрирован: 15.10.2011
Сообщений: 32

Re: Проблема с 3 DIV'ами (1 тянущийся)

Большое Вам спасибо, по ссылке как раз пример который мне нужен. Кажется уже увидел в CSS-стилях решение своей проблемы smile Пойду пробовать.

Нет на форуме

 

#4 18.02.2014 18:32

Kuzya
Новичок
Зарегистрирован: 15.10.2011
Сообщений: 32

Re: Проблема с 3 DIV'ами (1 тянущийся)

Всё сработало! Помогло margin-right -/+ и position absolute:) Только остался один момент - я не могу понять как выравнить div'ы (col1, col2, col3) по высоте. Чтоб при изменении высоты одного менялись все остальные. Сколько в код не глядел - не смог понять sad

Отредактированно Kuzya (18.02.2014 18:33)

Нет на форуме

 

#5 19.02.2014 08:22

Kuzya
Новичок
Зарегистрирован: 15.10.2011
Сообщений: 32

Re: Проблема с 3 DIV'ами (1 тянущийся)

Всё, разобрался. Выставил всем div'ам-колонкам height 100%, а body и основному div'у - забыл smile
Осталась последняя проблема. Из-за чего-то в основном div'е текст показывается не полностью. Хоть и у него выставлена высота 100%, часть текста (если его много) уходит как бы в никуда. Как будто div, содержащий текст, чем-то сдерживается по высоте. Если я ставлю heght: 105% то текст видно полностью. Увеличиваю количество текста - он снова уходит вниз и его не видно. Чтоб его увидеть приходится ставить height: 110% и т.д. Если ставлю height: auto, то всё перекашивает sad
Наверное тут без кода не разобраться, поэтому прикладываю ссылку на html-страничку + css-файл.
http://slil.ru/28674033
Буду очень благодарен за помощь в решении этой проблемы т.к. от окончания вёрстки меня удерживает лишь она.
P.S. Я конечно могу ошибаться, но мне почему-то кажется что эта проблема связана с position: absolute или неправильно выставленным z-index

UPD: Если div'у, содержащему основной контент, ставить overflow: auto, то в нём появляется полоса прокрутки и можно увидеть весь текст прокручивая её. Если ставить overflow: visible - ничего не меняется sad

Отредактированно Kuzya (19.02.2014 08:51)

Нет на форуме

 

#6 20.02.2014 09:55

Kuzya
Новичок
Зарегистрирован: 15.10.2011
Сообщений: 32

Re: Проблема с 3 DIV'ами (1 тянущийся)

Проблема решена благодаря JS smile
Вместо height:100% у основных элементов я поставил min-height:100% . Тут же все div'ы вытянулись в размер своих данных - боковые стали маленькими, а средний большим. Затем в конец страницы я добавил код

Код:

            var col1 = document.getElementById('col1');
            var col2 = document.getElementById('col2');
            var col3 = document.getElementById('col3');
            if( col2.offsetHeight

и всё стало как нужно smile

Нет на форуме

 

 

Страниц: 1


Board footer