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

Question

更新2

因此,当内容#main增加时,它应该按下页脚,如下所示:

...所以页脚不应该position: fixed;.当内容不足时应该在底部,当内容多于页面高度时应该按下.

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

UPDATE

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

这对我来说是一个挑战.想法...？

---

我试图在不使用JavaScript的情况下使这个布局工作......这就是我在图片形式中的意思:

坏...目前的布局

好......期望的布局

注意侧边栏如何以所需的布局一直延伸到页脚.我正在使用粘性页脚方法,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

另请注意,粘性页脚因为我自己的设计而在我的指纹上都有我的指纹..它可能很脏.