Столбец Css не заполняет высоту строки

Удивление, если я могу получить помощь здесь. В скрипке у меня большая часть необходимой разметки.Столбец Css не заполняет высоту строки

http://jsfiddle.net/theDawckta/54z3J/

Я не могу понять, как сделать columnItem в колонке 1, чтобы расширить до нижней части строки. То, что я хотел бы видеть в колонке 1, - это зеленый цвет, заполняющий красную строку, оставляя черный контент того же размера.

Я думаю, что это невозможно, так что удачи, мне этого достаточно.

источник

2012-01-06 theDawckta

Можете ли вы использовать jQuery? –

Нет, нет javascript, я знаю, что я отметил его как javascript, но это было просто для привлечения большего количества людей, чтобы посмотреть на него :) – theDawckta

Невозможно сделать родительский цвет .row' background-color green? (И при необходимости добавьте еще один div с красным фоном в качестве нижнего колонтитула?) – glortho

-1

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

Если эта проблема важна для вас, я предлагаю вам использовать таблицы.

источник

2012-01-06 23:01:47 Omeriko

Omer Ben-Nahum предложил таблицы, но я не уверен, что именно так вы хотите пометить свой контент. Существует никакого способа добиться этого эффекта с помощью CSS, но вы можете использовать некоторые обходные пути, которые придают сайту вид, который вы могли заставить его работать. Посмотрите на использование Faux Columns в качестве альтернативы таблицам.

источник

2012-01-06 23:21:04 Wex

Я действительно вырезал довольно много вашего кода, поэтому извиняюсь заранее, если вам нужны эти дополнительные div (но не обязательно их добавлять позже). Кроме того, вы можете протестировать это в IE - я не уверен, какая версия это отключается (но я думаю, что она работает в IE7 +).

HTML

<div class="row"> 
<div class="column"> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
</div> 
<div class="column"> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
    <div class="columnItem"> 
    <p>Content</p> 
    </div> 
</div> 
</div>

CSS

.row { 
overflow:hidden; 
} 
.column { 
float:left; 
width:50%; 
padding-bottom:10000px; 
margin-bottom:-10000px; 
} 

/* You can remove everything under this comment */ 
.columnItem { 
padding:10px; 
margin:5px; 
background:blue; 
} 
.column:nth-of-type(1) { 
background:yellow; 
} 
.column:nth-of-type(2) { 
background:pink; 
}

Как это работает

Это действительно очень просто. Каждая строка скрывает все, где находится фактический контент (с overflow:hidden;, в то время как каждый столбец подталкивает себя вниз на 10 000 пикселей с помощью padding-bottom:10000px;, а затем снова создает резервную копию с margin-bottom:-10000px;. Количество пикселей может быть увеличено или уменьшено, просто убедитесь, что он достаточно большой, чтобы соответствовать ваше содержание

PS. - Все возможно, невозможное просто требуется больше времени ~ NSA

источник

2012-01-06 23:24:55 0b10011

+1, хотя я уверен, что это не работает в Opera. – Wex

решение bfroh является один я использовал несколько раз, прежде чем, но в целом я обычно использую фоновое изображение для имитации подобных ситуаций. это (где содержание в одном div не делает его достаточно высоким)

Упаковочный контейнер фоновое изображение может иметь цвет фона для всего левого div и просто установить его на «repeat-y»

Работа с подобными проблемами (по моему опыту) либо в значительной степени влечет за собой взломать bfroh или решение, подобное это.

Надеюсь, это помогло!

источник

2012-01-06 23:51:17 Jassi

Столбец Css не заполняет высоту строки

ответ

Смежные вопросы