помогите советом

[dangerous]

Доброго времени суток!

Есть макет из двух колонок: в левой колонке отображается текст статьи, в правой список ссылок на все статьи сайта. Правая колонка со списком всех статей должна вытягиваться на высоту левой колонки с текстом статьи, но не больше и при этом лишние ссылки на статьи должны уходить за область контента правой колонки и становиться невидимыми (типа overflow: hidden). Надеюсь понятно объяснил... Есть идеи как это можно реализовать? Заранее благодарен.

[npofopr]

Что именно реализовать?

Две колонки http://csstemplater.com/

overflow:hidden; можете и им сделать. Можете скриптами

[dangerous]

меня интересует как заставить одну колонку обрезаться до высоты другой? есть два div'а: в первом 5 строк, во втором - 10. каждая строка - тоже div. как заставить div, в котором 10 строк тоже быть высотой в 5 строк, а лишние строки были бы не видны?

если просто прописать div'у, высотой в 10 строк overflow: hidden, то это не сработает

Edited November 21, 2013 by dangerous

[Z1gnet]

задайте максимальную высоту на оберточный блок и оверфлов хидден

[dangerous]

а как задать максимальную высоту, равную высоте другого блока?

[swandev]

Что именно реализовать?

Две колонки http://csstemplater.com/

overflow:hidden; можете и им сделать. Можете скриптами

 

Тот способ подойдет только если фон одноцветный.

[Z1gnet]

как вариант http://jsfiddle.net/zWs7L/ показал 2 примера, когда в правой колонке много пунктов в списке и когда мало

а можете показать скрин того что хотите получить?

[Zippovich]

сделайте сайдбар position: absolute и обрезайте родитель position: relative, который содержит 2 блока.

<div style="overflow: hidden; padding-left: 200px; position: relative">    <div style="background: yellow">sdlkjfsdolkfjslfkjsdflk<br/>sldkfjslfkjsdf<br/>sldkfjslkfdsj<br/>lskdjfslkdfjs<br/>lsdkfjslkfjsf<br/>lskdjfslkfjsd<br/>lsdkfjsldkfj    </div>    <div style="position: absolute; left: 0; top: 0; width: 200px; background: red">sdlkjfsdolkfjslfkjsdflk<br/>sldkfjslfkjsdf<br/>sldkfjslkfdsj<br/>lskdjfslkdfjs<br/>lsdkfjslkfjsf<br/>lskdjfslkfjsd<br/>lsdkfjsldkfj<br/>sdlkjfsdolkfjslfkjsdflk<br/>sldkfjslfkjsdf<br/>sldkfjslkfdsj<br/>lskdjfslkdfjs<br/>lsdkfjslkfjsf<br/>lskdjfslkfjsd<br/>lsdkfjsldkfj    </div></div>

[npofopr]

Это столь изъезжанная тема, что я даже не знаю почему у вас проблема...

Несколькими темами ниже, на форуме, то же самое обсуждалось.

На хабре есть прекрасные статьи по этому поводу. И здесь на сайте есть.

Вбейте в гугл: колонки одинаковой высоты. И все проблемы исчезнут.

В английском варианта, что то типа: equal height colomns css.

 

Самым простым для вам будет, видимо, задать padding-bottom: 20000px; margin-bottom: -20000px;

 

+ есть куча скриптов, которые умеют выравнивать колонки. И есть которые могу обрезать, добавлять "..." тексту.

[Z1gnet]

Это столь изъезжанная тема, что я даже не знаю почему у вас проблема... Несколькими темами ниже, на форуме, то же самое обсуждалось. На хабре есть прекрасные статьи по этому поводу. И здесь на сайте есть. Вбейте в гугл: колонки одинаковой высоты. И все проблемы исчезнут. В английском варианта, что то типа: equal height colomns css. Самым простым для вам будет, видимо, задать padding-bottom: 20000px; margin-bottom: -20000px; + есть куча скриптов, которые умеют выравнивать колонки. И есть которые могу обрезать, добавлять "..." тексту.

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

[swandev]

 

Это столь изъезжанная тема, что я даже не знаю почему у вас проблема... Несколькими темами ниже, на форуме, то же самое обсуждалось. На хабре есть прекрасные статьи по этому поводу. И здесь на сайте есть. Вбейте в гугл: колонки одинаковой высоты. И все проблемы исчезнут. В английском варианта, что то типа: equal height colomns css. Самым простым для вам будет, видимо, задать padding-bottom: 20000px; margin-bottom: -20000px; + есть куча скриптов, которые умеют выравнивать колонки. И есть которые могу обрезать, добавлять "..." тексту.

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

 

max-height, overflow: hidden  вам не подходит?

[Z1gnet]

max-height, overflow: hidden вам не подходит?

ну насколько я понял не совсем подходит, так как мы не знаем мин-хейт. он динамически может менять в зависимости от количества контента в левой колонке.

[Zippovich]

А в чем вопрос, чем Вам не подходит мой код?

[swandev]

 

max-height, overflow: hidden вам не подходит?

ну насколько я понял не совсем подходит, так как мы не знаем мин-хейт. он динамически может менять в зависимости от количества контента в левой колонке.

 

http://jsbin.com/OMameQA/6/edit

[dangerous]

как вариант http://jsfiddle.net/zWs7L/ показал 2 примера, когда в правой колонке много пунктов в списке и когда мало

а можете показать скрин того что хотите получить?

спасибо

 

сделайте сайдбар position: absolute и обрезайте родитель position: relative, который содержит 2 блока.

<div style="overflow: hidden; padding-left: 200px; position: relative">    <div style="background: yellow">sdlkjfsdolkfjslfkjsdflk<br/>sldkfjslfkjsdf<br/>sldkfjslkfdsj<br/>lskdjfslkdfjs<br/>lsdkfjslkfjsf<br/>lskdjfslkfjsd<br/>lsdkfjsldkfj    </div>    <div style="position: absolute; left: 0; top: 0; width: 200px; background: red">sdlkjfsdolkfjslfkjsdflk<br/>sldkfjslfkjsdf<br/>sldkfjslkfdsj<br/>lskdjfslkdfjs<br/>lsdkfjslkfjsf<br/>lskdjfslkfjsd<br/>lsdkfjsldkfj<br/>sdlkjfsdolkfjslfkjsdflk<br/>sldkfjslfkjsdf<br/>sldkfjslkfdsj<br/>lskdjfslkdfjs<br/>lsdkfjslkfjsf<br/>lskdjfslkfjsd<br/>lsdkfjsldkfj    </div></div>

спасибо

[Z1gnet]

А в чем вопрос, чем Вам не подходит мой код?

да все ваш код подходит. я практически тоже самое перед вами написал. просто немного пообсуждали возможные варианты решений))