Двухпанельный сайт - растяжка по вертикали?
У меня есть этот макет:
Верхняя панель исправлена. Затем я хочу иметь боковую панель на левой панели и правую панель с основным содержанием. Панели разных цветов и отделены от границы.
Проблема в том, что иногда левая панель будет выше, а иногда правая будет выше. И поэтому одна панель короче другой (цвет заканчивается, и вы видите белый).
я пробовал height:100%;
но это работает, только если контент короче высоты браузера.
Как я могу решить это только с помощью CSS?
3 ответа
Вы можете использовать технику, называемую "искусственные колонны". Хорошим примером является метод 3 на этой странице, или, как добавил Векс в комментарии ниже, эта ссылка на A List Apart.
Вы можете попробовать что-то вроде этого. Единственная проблема заключается в том, что вам нужно знать фиксированную высоту, если возможно, чтобы один столбец был больше другого, и нет способа узнать, какой из них будет больше, вам может потребоваться выполнить jquery, чтобы выяснить это.
Мое решение этой проблемы состоит в том, чтобы обычно вкладывать столбцы так, чтобы один столбец контролировал другой, а затем дать другому фоновое изображение, которое выглядит так, как будто это первое продолжение:
<style>
*{margin:0;padding:0;}
.main_con{position:relative;margin:0 auto;width:960px;}
.head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
.col_con{padding:42px 0 0 0;}
.left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
.right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
.right_col_content{float:left;width:585px;}
.clr{clear:both;}
</style>
для HTML:
<div class="main_con">
<div class="col_con">
<div class="right_col">
<div class="left_col">
<p>left column content pushes right column down</p>
</div>
<div class="right_col_content">
<p>right column content</p>
</div>
<br class="clr" />
</div>
</div>
<div class="head_con">
<p>head content</p>
</div>
</div>
примечание: *{} зачистка предназначена только для примера и должна быть заменена соответствующим битом зачистки по умолчанию css.