Получение боковой панели 100% высоты при использовании искусственных столбцов и липкого нижнего колонтитула

Question

Я использую двухколоночную разметку с липким нижним колонтитулом.

Я пытаюсь заставить боковую панель использовать высоту 100%, даже если на странице не так много контента.

Я использовал две техники для этого.Первый - это липкий нижний колонтитул CSS (http://www.cssstickyfooter.com/), а второй - искусственные столбцы (http://www.alistapart.com/articles/fauxcolumns/).

). Искусственные столбцы хорошо работают для поддержания одинаковой высоты двух столбцов и расширения любого из них при необходимости.

Моя задача заключается в том, что если вы посмотрите на этот пример (http://visuals.customstudio.co.uk/atc/sidebar/), вы увидите, что боковая панель не распространяется на всю высоту страницы.

Я попробовал другой метод, подробно описанный здесь (http://stackoverflow.com/a/6838338/557002), который вы можете увидеть здесь (http://visuals.customstudio.co.uk/atc/sidebar/about.html), но это означает, что если на боковой панели больше контента, чем в основной области, он не виден.

Любые идеи о том, как сделать так, чтобы оба столбца увеличивали высоту страницы по мере необходимостии простирается до самого нижнего колонтитула, будет очень цениться.

Answer 1

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

Для этого просто используйте фоновое изображение на элементе <div id="outer" />. Вот так:

#outer {
url(../images/faux-columns.png) repeat-y center top;
}

Надеюсь, это поможет!

Answer 2

Я думаю, что проблема с вашим about.html заключается в этом css code:

.main-wide {
overflow: auto;
padding-bottom: 266px; /* footer height */
}

Когда вы пытались расширить sidebar, он скрывается с помощью overflow из .main-wide, пытаясь дать пользовательский width для sidebar и main-wide, например:

.main-wide {
 width:75%; //or whatever you want in ratio or pixels
overflow: auto;
padding-bottom: 266px; /* footer height */
}

и

.sidebar{ //any sidebar class
   width:25%;
   min-height:300px; //or as your wish
 }

P.S. Я не профессиональный веб-разработчик, но мало что знаю. Надеюсь, это поможет вам.

Answer 3

а как насчет вашего .main-centre a min-height?Я не знаю, правильно ли я вас понимаю, но это выглядит хорошо для меня.

Кстати, многие ваши отступы и поля устарели и могут привести к кросс-браузерным проблемам.