Как сделать так, чтобы боковая панель совпадала с нижним колонтитулом?

У меня проблема с боковой панелью. В дизайне, который я сейчас кодирую, боковая панель слегка перекрывает заголовок сайта — намеренно. Однако проблема в том, что я могу использовать неправильный метод для этого.

Предполагается, что боковая панель выровнена с нижним колонтитулом, но поскольку я использую:

#sidebar {
    width: 270px;
    position: relative;
    left: 690px;
    bottom: 125px;

Если я не использую эти строки, боковая панель совпадает, но я не могу найти другого способа сделать это.

Есть еще одна проблема, которая проявляется при добавлении контента: боковая панель автоматически переносит весь контент боковой панели вместе с основным контентом, хотя рамка боковой панели остается на том же месте.

Я включил страницу в codepen, если вы хотите взглянуть на нее.

http://codepen.io/anon/pen/BxpJa

Спасибо за помощь, Михаил :)


html sidebar css footer positioning
person michaelw90    schedule 02.03.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Избавиться от

position: relative;
left: 690px;
bottom: 125px;

И добавить:

float: right;
margin-top: -65px; /* adjust to your needs */

Затем очистите плавающее <aside> справа перед закрывающим родителем </div>... добавьте:

<br style="clear: right;" />

Пример

Это будет более согласованно в разных браузерах, а <aside> совпадет с <footer>.

person Jason Yaraghi    schedule 02.03.2013

arrow_upward
0
arrow_downward

Причина, по которой боковая панель не выровнена с нижним колонтитулом (под этим я полагаю, вы имеете в виду, что нижний колонтитул находится непосредственно под боковой панелью без дополнительного интервала), заключается в том, что вы расположили боковую панель относительно ее родительского контейнера. Таким образом, высота боковой панели остается такой же, как и раньше, и не будет учитываться то, что она должна быть выше, потому что вы переместили ее вверх.

Попробуйте сдвинуть родителя-обертку вправо, а затем задать элементу #sidebar отрицательное верхнее поле.

#sidebar-wrapper {
   float: right; 
}
#sidebar {
    width: 270px;
    margin-top: -125px;
    position: relative;
    background-color: #282828;
    margin-right: 20px;
    padding-bottom: 25px;
}
person Terry    schedule 02.03.2013
comment
Спасибо за ваши комментарии, ребята, я действительно попробовал этот метод, но изменил его на текущий, потому что это создает другую проблему — обертка содержимого также должна выравниваться с нижним колонтитулом, но всякий раз, когда я реализую float: right; к элементу боковой панели обертка содержимого останавливается сразу после содержимого. - person michaelw90; 02.03.2013
comment
Дополнительная наценка за очистку поплавков заставляет Младенца Иисуса плакать. nicolasgallagher.com/micro-clearfix-hack - person cimmanon; 02.03.2013
comment
Вам просто нужно очистить поплавок. Используйте overflow: hidden или метод clearfix. Первый может не сработать, потому что вы отрицательно расширяете верхнее поле. - person Terry; 02.03.2013
comment
Ребят огромное спасибо за помощь, уже 2 дня бьюсь с этой проблемой, не мог понять в чем дело :) - person michaelw90; 02.03.2013

arrow_upward
0
arrow_downward

margin-top: -125px; вместо bottom: 125px;

person Jesse Lee    schedule 02.03.2013