Двухколоночный CSS-макет с цветами фона, которые заполняют всю высоту?
Я достаточно хорошо знаком с макетом CSS.
Я просмотрел довольно много макетов CSS для макетов из 2 или 3 столбцов, и мне было трудно найти хотя бы надежный 2 столбца, который позволяет мне делать следующее:
что я хочу:
- каждый столбец имеет свой цвет фона
- я хочу, чтобы фоновый столбец занимал всю высоту страницы
- Я не знаю, какой столбец будет содержать больше всего текста, поэтому размер каждого столбца должен изменяться независимо
из всех макетов, которые я нашел - или попробовал себя, у всех есть одна из этих проблем
- изображение необходимо для фона (несколько умно, но неряха!)
- цвет фона заполняет всю высоту только в том случае, если этот столбец самый длинный
Мне очень хочется просто вернуться к <TABLE>, который я могу надежно реализовать примерно в 3 строках кода.
Вы прокомментировали, что в настоящее время используете опубликованное решение для изображений. Почему бы не отметить это как ответ ... похоже, некоторым людям действительно потребовалось приличное количество времени, чтобы оказать вам качественную помощь.
Ответы 7
Если у вас есть проблема с изображением-фоном, что, черт возьми, оправдывает использование таблиц? Мне это кажется очень обратным. Фон изображения дает вам правильную разметку, желаемый эффект и имеет кроссбраузерность.
Вы можете использовать Javascript, но в этом нет необходимости.
что мне не нужно создавать новое изображение каждый раз, когда я хочу изменить ширину или цвет полос. Я был своего рода защитником дьяволов, предлагая столы, но я точно знаю, что это сработает, и я не совсем уверен, что меня это волнует.
Я потратил (потратил впустую) много времени на поиски хорошего решения CSS для этого. Чувак, используй стол. Мы никому не скажем.
Насколько я люблю css и использую его неукоснительно, +1 для преодоления идеологии и выполнения задач, прежде чем вы выдернете все свои волосы.
в настоящее время я использую фоновое изображение. на реализацию ушло около 1 минуты. кажется, работает неплохо, но я ненавижу это!
Если искусственные колонны вам не нравится, попробуйте макеты с несколькими столбцами.
Удалите контент из любого блока (его много), чтобы попробовать.
У меня всегда были проблемы с этим - я бы посоветовал вам сделать закладку Список отдельно и просмотреть некоторые статьи в категории CSS. У них есть отличные руководства и записи для фронтенд-кодеров (такие как CSS-спрайты, жидкие макеты, шрифты и т. д.).
Я забыл / никогда не использовал макеты с несколькими столбцами. Хороший.
Если вы не используете фиксированную высоту (вероятно, это не жизнеспособное решение) или не используете технику искусственного столбца с использованием фонового изображения (которое вы уже обозначили как проблема), вам в значительной степени не повезло.
Техника псевдоколонки широко используется и функциональна кроссбраузерна. Почему это не подходящее решение для вас?
«faux column» просто не кажется таким элегантным. я просто удивлен, что это «лучшее» решение, которое CSS может предоставить
Одна из причин, по которой я был против идеи фальшивого столбца, заключается в том, что я хочу иметь возможность динамически изменять ширину без необходимости создавать новое изображение. в конечном итоге я могу создать элемент управления .NET, чтобы помочь с макетами столбцов, и я бы предпочел не использовать предварительно созданные изображения.
Если у меня правильный вопрос, ваш макет должен быть таким простым, как:
<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] - ширина страницы.
Если вы соедините этот ответ с некоторым javascript, вы можете получить столбцы баланса. Логика довольно проста, ЕСЛИ A> B C = B ELSE C = A В качестве альтернативы вы можете посмотреть ответ Логана stackoverflow.com/questions/448164/…
Это не сложная проблема, поэтому я не советую вам возвращаться к таблицам. Я немного не понимаю, что именно вы хотите, поэтому позвольте мне помочь вам как можно лучше.
<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
Это то, что вы ищете?
Лучше поздно, чем никогда. Думал, что это может помочь:
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
Хороший выбор ... фоновое изображение - это то, что вам нужно. Таблицы для табличные данные. :) Удачи!