Question

我遇到了问题并帮助您了解我制作了jsfiddle。

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

Answer 1

这是一个可能适合您的解决方案。

<强> Example Fiddle

在这种情况下，您将页脚绝对放在左侧和底部，并将margin-left:设置为等于左侧.bar的宽度。

CSS：

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

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

Answer 2

以下是解决方案的更新小提琴： - 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： - 添加了主分区

<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 3

badAdviceGuy和AT-UID已经给出了最初可行的答案，但是如果您在页脚上方的内容比显示的页面长，则在向下滚动以查看剩余内容时，页脚将向上移动页面。

CSS中的页脚类需要

position:fixed; bottom:0px; margin-left:41px;才能使页脚停留在页面底部。在我的编辑中，保证金左边是41像素，因为这是固定条的宽度加上边框的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;}

固定柱，流体含量和底部固定页脚

3 个答案: