Люди добрые, помогите кто чем может! 🙂 Не могу решить задачку. Надо растянуть до низа поле для контента. Для наглядности привожу код (из файла стилей) и прикладываю скрин темы.
/** BEGIN content **/
#content {
width: 560px;
background: #ffffff;
float: left;
padding: 10px 10px 0px 10px;
}
#content .latest {
padding: 0px 0px 0px 10px;
}
#content .latest h2 {
margin-bottom: 0px;
font-size: 1.5em;
}
#content .latest h2 a {
color: #2d2d2d;
}
#content .latest h2 a:hover {
color: #000;
}
#content .latest .details {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 0.9em;
color: #000;
}
#content .latest .details a {
color: #2d2d2d;
}
#content .latest .details a:hover {
color: #000;
text-decoration: none;
}
#content .latest p {
text-align: justify;
}
#content p {
line-height: 1.3em;
margin-bottom: 10px;
}
#content ul {
margin: 0 0 10px 16px;
}
#content ol {
margin: 0 0 10px 18px;
}
#content li {
line-height: 1.3em;
padding: 2px 0;
}
#content h3 {
font-size: 1.5em;
font-weight: normal;
}
#content blockquote {
padding: 10px 10px 0;
border: 1px solid #cccccc;
background-color: #eeeeee;
font-weight: bold;
margin-bottom: 10px;
}
/** END content **/
Для колонок "одинаковой высоты" один из самых простых способов
http://habrahabr.ru/blogs/css/64242/
Там есть такие слова:
Осталось только задать фон для колонок и сделать их плавающими. Работает везде.
Все по стандарту. Делаем большой паддинг снизу, это дает бэкграунд вниз. Ровно таким маргином компенсируем отступ. Родительский див отрезает лишнее.
Пример
Так вот, ссылка "Пример" не работает. Что за родительский див, который отрезает лишнее? Если просто добавить padding-bottom:1000px;, то высота будет именно такой, а не плавающей.
То, что в комментах, ходил по ссылкам, но решения не нашел…
Если вам сложно разобраться в блочной верстке сверстайте таблицей (<table>).
<table><tr>
<td>вывод постов</td> <td>вывод сайдбара</td>
</tr></table>
Там всегда колонки одинаковой высоты.
Спасибо. Есть у кого-нибудь другие варианты?
Я бы например не стал ничего растягивать, а блок в котором находится запись (он вас серого цвета) сделал бы белым. Тогда визуально у вас все выровнялось бы.
kuzmi4, здравствуйте! Там не очень видно, на самом деле это бекграунд серый, а блоку для записей прописан белый цвет. Я понимаю, что всё равно растянется, когда там появится запись. Но, а вдруг запись будет короткая, как в данном случае? Тогда под записью будет оставаться серое поле…
Раз уж всё так грустно, то сделайте div который будет сразу же после картинки.
в css:
.globContent{background:#FFF;}
Уход от решения не всегда есть хорошо 😉
Очень часто дизайнеры "рисуют" макеты с колонками "одинаковой" высоты.
Вот еще пример, хоть и более сложный чем по 1й ссылке
http://chikuyonok.ru/2009/06/float-columns/
А никто и не уходит. Просто в данном случае я не вижу целесообразным делать запись одинаковой высоты с сайдбаром (это не корректно т.ч. зрения верстки), потому что запись является вложенным блоком, и может быть не одна. Просто если растянуть сам блок записи а потом добавить еще одну – будет хрень. Если уж выравнивать блоки, то только тот в который включена запись и сайдбар, а судя по рисунку они выровнены. Для визуализации можно просто серый цвет изменить на белый.
Я имел ввиду выравнивать не блок записи , а контейнер в котором лежат блоки-записи.
Если нет вертикальных разделителей блоков , то проще конечно бэкграунд поправить.
Но если есть разделитель между контейнером записей и сайдбаром, то без колонок "одинаковой" высоты не обойтись, т.к. будет очень плохо смотреться.
Хотя многие не заморачиваются на этот счет. 😉
Я создал блок box и в него разместил content+sidebar
#box {
position: absolute;
min-height: 100%;
z-index:-100;
background-color: #FFF;
width: 960px;
margin-top: 0px;
}