2-х цветный макет CSS с фоновыми цветами, которые заполняют всю высоту?

Question

У меня было достаточное количество разметки CSS.

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

что я хочу:

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

из всех макетов, которые я нашел - или пытался сам, у всех есть одна из этих проблем

• для фона требуется изображение (несколько умное, но юк!)
• цвет фона заполняет всю высоту, только если этот столбец самый длинный

Мне очень хочется просто вернуться к <TABLE>, который я могу надежно реализовать примерно в 3 строках кода.

Answer 1

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

Удалите содержимое из любого блока (его достаточно), чтобы попробовать его.

У меня всегда были проблемы с этим - я бы посоветовал вам добавить в закладки A List Apart и просмотреть некоторые статьи в категории CSS. У них есть отличные учебные пособия и рецензии для кодеров внешнего интерфейса (такие как спрайты CSS, жидкие макеты, шрифты и т. Д.).

Answer 2

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

<div class="a">Text A</div>
<div class="b">Text B</div>

С помощью CSS:

html, body
{
    height: 100%;
}

.a
{
    width: 50%;
    height: 100%;
    min-height: 100%; /* For IE */
    background-color: red;
    float: left;
}

.b
{
    width: 50%;
    height: 100%;
    min-height: 100%;
    background-color: blue;
    float: left;
}

Это даст вам что-то вроде этого: for-simon.html

Это то, что вы ищете?

Answer 3

Если я правильно сформулировал ваш вопрос, ваш макет должен быть таким простым:

 <div class="wrapper">
    <div class="col1">Blahblah</div>
    <div class="col2">Blahblah</div>
    <div class="clear"></div>
 </div>

styles.css:

 .wrapper { background-image: url(imageTile.gif); background-repeat: repeat-y; }
 .col1 { float: left; width: 100px; margin-right: 20px; }
 .col2 { float: left; width: 100px; }
 .clear { clear: both; }

Забудьте о таблице, ИМО, это намного проще. Высоты будут сгибаться с содержанием. Файл imageTile.gif должен быть размером 1px на [x] px цвета фона, где [x] - ширина страницы.

Answer 4

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

Метод искусственной колонки широко используется и является функциональным кросс-браузерным. Почему это не жизнеспособное решение для вас?

Answer 5

Если у вас есть проблема с фоновым изображением, что может быть оправдано при использовании таблиц? Это кажется очень отсталым для меня. Фоновое изображение дает вам правильную разметку, желаемый эффект и кросс-браузерную совместимость.

Вы можете использовать Javascript - но это действительно не обязательно.

Answer 6

Лучше поздно, чем никогда. Думаю, это может помочь:

Htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

CSSS

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

Вы можете просмотреть это @ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

Answer 7

Я на самом деле не поддерживаю эту опцию, но вы можете проверить пример 7 здесь, если вы открыты для решения на основе JavaScript.

http://www.html.it/articoli/niftycube/index.html

Answer 8

Я успешно реализовал метод, описанный в http://www.ejeliot.com/blog/61 под заголовком «Другой путь»

Answer 9

Я потратил (впустую) много времени в поисках хорошего решения CSS для этого. Чувак, используй столик. Мы никому не скажем.