html - 固定列、流动内容和底部固定页脚

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>

希望这对您有所帮助!