BS 3.0 Липкий нижний колонтитул со 100% ростом дочерних элементов

Question

Я использую метод липкого нижнего колонтитула для Bootstrap 3.0, как описано в их примере. У меня это работает нормально, и это не то, с чем я борюсь.

Это требует, чтобы обертка имела следующее:

html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}

Теперь я пытаюсь поместить в него контейнеры высотой 100%, но не могу, потому что на родительском объекте есть высота auto. Есть ли способ обойти это и сохранить мой липкий нижний колонтитул? Я хочу поместить контейнеры на 100% высоты, которые растягиваются, чтобы я мог поместить фон в них.

Спасибо

Answer 1

Я не совсем уверен, подходит ли это решение вашим потребностям, но оно включает в себя абсолютное позиционирование div за боковой панелью и увеличение растяжения #wrap установив top а также bottom до 0. Он по существу наследует высоту, избегая при этом явного объявления свойства высоты. Единственная потенциальная проблема будет, если у вас есть другие элементы, которые находятся над боковой панелью (то есть заголовки), так как div также будет растянут за ними.

http://jsfiddle.net/qaB8D/

#wrap {
    position: relative;
}

aside, #words {
    /* This is just so the sidebar stays left, and the text stays right */
    display: table-cell; 
}

aside {
    width: 100px;
}

aside:before {
    content: '';
    position: absolute;
    background-color: red;
    top:0;
    bottom: 0;
    width: inherit;
    z-index: -10;
}

/* include Sticky Footer code/*