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

...所以页脚不应该position: fixed;.当内容不足时应该在底部,当内容多于页面高度时应该按下.
在这两种情况下,#sidebar需要跨越从底部#header到顶部的高度#footer.
一些残酷的细节......只要页面上的内容很小,页脚就应该在底部,但是当内容足够大时,它应该向下推页脚(这是我在粘性页脚链接中描述的功能)提供).我需要侧边栏始终位于页眉和页脚之间的全高(从页眉底部到页脚顶部).
这对我来说是一个挑战.想法...?
我试图在不使用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>
Run Code Online (Sandbox Code Playgroud)
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 …Run Code Online (Sandbox Code Playgroud)