Фиксированная колонка, содержание жидкости и нижний фиксированный нижний колонтитул

Question

У меня есть проблема, и чтобы помочь вам понять, я сделал jsfiddle.

________________________________ 
    | |       | 
    | F |       | 
    | I |       | 
    | X |       | 
    | E |       | 
    | D |   CONTENT   | 
    | |       | 
    | B |       | 
    | A |       | 
    | R |       | 
    | |       | 
    | 3 |___________________________| 
    | 0 | FOOTER POSITIONED BOTTOM | 
    | | OR DANTE'S INFERNO ? | 
    |___|___________________________| 

Answer 1

Вот обновленный Fiddle с решением: - http://jsfiddle.net/2C955/40/

Css Изменения, которые я сделал: -

body, html { 
    width: 100%; 
    height: 100%; 
} 
#main { 
    width: 100%; 
    height: 100%; 
    display:table; 
} 
.bar { 
    height: 100%; 
    width: 100px; 
    display:table-cell; 
} 
.content { 
    height: 100%; 
    width: 90%; 
    display:table-cell; 
} 
.footer { 
    width: 90%; 
    position: absolute; 
    bottom: 0px; 
} 

HTML: - Добавлен Main Div

<div id="main"> 
    <div class="bar">Fixed space</div> 
    <article class="content"> 
     <div>here is the content</div> 
     <div class="footer">FOOTER NEED TO BE PLACE AT THE BOTTOM...BUT HOW?</div> 
    </article> 
</div> 

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

Answer 2

Это одно решение, которое может работать для вас.

Example Fiddle

В этом случае абсолютное положение колонтитул слева и снизу, а также установить margin-left: равна ширине слева .bar «s.

CSS:

.bar { 
    //existing styles 
    width: 30px 
} 

.footer { 
    //existing styles 
    position:absolute; 
    bottom: 0px; 
    left: 0px: 
    width: 100%; 
    margin-left: 30px; 
} 

Answer 3

badAdviceGuy и AT-UID дали ответ, который будет работать на начальном этапе, однако, если ваше содержимое выше нижнего колонтитула больше, чем отображаемая страница, нижний колонтитул будет перемещаться по странице при прокрутке вниз, чтобы просмотреть оставшееся содержимое.

position:fixed; bottom:0px; margin-left:41px; будет необходим в вашем классе нижнего колонтитула в CSS, чтобы нижний колонтитул застрял в нижней части страницы. Margin-left - 41px в моем редактировании, так как это ширина вашего фиксированного бара плюс 1px для границы.

Обновлено скрипку CSS:

*{margin: 0; padding: 0} body,html {width: 100%; height: 100%} 
.bar {height: 100%; width: 40px; float: left;} 
.content {min-height: 100%;} 
.footer {width: calc(100% - 41px);position:absolute;margin-left:41px;bottom:0%;} 


/* STYLING */ 
.footer {color: #FFF; text-align: center; padding: 30px 0;} 
.bar {border-right: 1px solid #FFF; color: #FFF; font-size: 10px; text-align: center} 
.footer {background: #00cc7a;} 
.content {background: #369;} 
.bar {background: #639;}