css двухколонный макет с нижним колонтитулом - часть правого столбца расположена ниже левого столбца - PullRequest
1 голос
/ 15 января 2010

Я пытаюсь создать макет из двух столбцов с нижним колонтитулом.До сих пор результатом является головная боль ;-) На самом деле я не очень опытный с CSS.Я предпочитаю реализовывать бизнес-логику.

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

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

Надеемся найти здесь какую-нибудь помощь.Заранее спасибо.

Здесь вы можете найти страницу: ссылка

Столбцы определены в Structure.css.На что следует обратить внимание:

_#container .c_left
_#container .c_right
#container .c_footer

Редактировать: проблема возникает в каждом браузере.Таким образом, нет проблем с IE6.Определенно ошибка дизайна.

Ответы [ 2 ]

3 голосов
/ 15 января 2010

[удалил мои пункты маркера - это лучше всего продемонстрировать в html!]

Вот HTML-фрагмент, который можно адаптировать к нужному размеру:

<body> 
<div style="min-width:400px;">
 <div style="float:left; background:red;height:200px; width:200px;">left column</div> 
 <div style="overflow:hidden; height:300px; background:blue; color:white;">right column</div> 
 <div style="clear:both">&nbsp;</div> 
 <div style="background:black;color:white">footer</div> 
</div>
</body> 

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

0 голосов
/ 15 января 2010

Пожалуйста, укажите ваш браузер и номер версии, когда вы задаете вопросы CSS.

Я думаю, что проблема происходит в IE6? объявите правый столбец с плавающей точкой в ​​левом, а добавьте пустой div с прозрачным: оба после правого столбца div.

<div class="left-col">abc</div>
<div class="right-col">def</div>
<div style="clear:both;"></div>

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

Добро пожаловать в ад IE6.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...