另一个HTML / CSS布局挑战 - 带有粘性页脚的全高侧边栏

Question

更新2

因此，当#main中的内容增加时，它应该按下页脚：

...所以页脚不应该是position: fixed;。当内容不足时应该在底部，当内容多于页面高度时应该向下推。

在这两种情况下，#sidebar都需要跨越从#header底部到#footer顶部的高度。

更新

一些残酷的细节......只要页面上的内容很小，页脚就应该位于底部，但是当内容足够大时，它应该将页脚向下推（这是粘性页脚链接中描述的功能）我提供了）。我需要侧边栏始终位于页眉和页脚之间的全高（从页眉底部到页脚顶部）。

这对我来说是一个很大的挑战。想法...？

---

我正在努力使这个布局没有使用JavaScript ...这就是我在图片中的含义：

BAD ...当前布局

GOOD ...所需的布局

注意侧边栏如何在所需布局中一直延伸到页脚。我正在使用粘性页脚方法，http://ryanfait.com/sticky-footer/和http://www.cssstickyfooter.com/，现在我需要扩展侧边栏以跨越从页眉到页脚的高度。这就是我的......

http://jsfiddle.net/UnsungHero97/2ZhpH/

...以及jsFiddle关闭时的代码......

HTML

<div id="wrapper">
    <div id="header"><div id="header-content">Header</div></div>
    <div id="content">
        <div id="sidebar">Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
        <div id="main">Main</div>
    </div>
    <div class="push"></div>
</div>
<div id="footer"><div id="footer-content">Footer</div></div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    min-height: 100%;
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
#footer {
    height: 50px;
}
#footer-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
.push {
    height: 50px;
    clear: both;
}    

#header {
    height: 50px;
}
#header-content {
    border: 1px solid magenta;
    height: 32px; /* height + top/bottom paddding + top/bottom border must add up to footer height */
    padding: 8px;
}
#content {
    height: 100%;
}
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    height: 100%;
    float: left;
}

有关如何执行此操作的任何建议？我尝试过使用position: fixed但是当页面足够大并且你需要滚动时，这种方法变得非常难看。

Answer 1

内容很少：http://jsfiddle.net/2ZhpH/41/

有很多内容：http://jsfiddle.net/2ZhpH/42/

我将position: relative添加到#wrapper，然后：

#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
}
#main {
    margin-left: 102px
}

（为什么position: relative？为了避免这样的事情：http://jsfiddle.net/2ZhpH/40/）

Answer 2

读书真的不是我的事情所以如果我错过了什么就不要挂我，但我认为应该这样做。

http://jsfiddle.net/Fggk6/ - 请注意，侧边栏使用背景图片，这样更容易。侧边栏和内容区域背景均来自#wrap

另请注意，粘性页脚的指纹遍布整个，因为我的设计可能很脏。

Answer 3

如果您将position:absolute;添加到css样式#sidebar，它将一直向下延伸。

然后，您需要将div id="main修改为<div id="main" style="margin-left:100px;position:absolute;">Main</div>或创建另一个css类。

我希望这很清楚。

Answer 4

那怎么样？

http://jsfiddle.net/2ZhpH/25/

<强>更新

添加背景颜色以显示页脚固定在底部，正常情况下侧边栏的高度超出页脚。使用z-index，您将不会注意到它。