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

因此，当

#main

中的内容增加时，它应该向下推页脚，如下所示：

。。。所以页脚不应该是

位置：fixed。当内容不足时，它应该位于底部，当内容超过页面高度时，它应该向下推

在这两种情况下，
#侧栏
需要跨越从
#页眉
底部到
#页脚
顶部的高度

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

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


我正在尝试在不使用JavaScript的情况下使此布局正常运行。。。以下是我在图片形式中的意思：

坏。。。当前布局

好。。。所需布局

请注意侧边栏是如何一直延伸到所需布局中的页脚的。我正在使用粘性页脚方法，现在我需要扩展侧边栏以跨越页眉到页脚的高度。这是我所拥有的


。。。如果JSFIDLE出现故障，代码将被删除

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>

有什么建议吗？我尝试过使用
position:fixed
，但是当页面足够大并且需要滚动时，这种方法会变得非常难看。
如果添加
position:absolute到css样式
#边栏
它将一直向下扩展

然后需要将
div id=“main
修改为
main
或创建另一个css类

我希望这是清楚的。
怎么样


更新

添加了背景色，以显示在底部固定页脚时，侧边栏的高度超出页脚是正常的。使用z索引，您不会注意到它。
内容很少：

内容丰富：

我将
位置：relative
添加到
#wrapper
，然后：

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

（为什么
位置：相对的？
？只是为了避免这样的事情：）
阅读真的不是我的事，所以如果我错过了什么，不要绞死我，但我认为这应该可以做到

-请注意，侧边栏使用背景图像，这样更容易。侧边栏和内容区域背景都来自
#wrap

另外请注意，粘性页脚上到处都是我的指纹，因为它是我自己设计的。它可能很脏。
你到底想做什么？你是否试图构建这样的布局，使页脚粘在页面底部，无论屏幕大小如何？@sniper…不，只要内容打开，页脚就应该在底部页面很小，但当内容足够大时，它应该向下推页脚（这是我提供的粘性页脚链接中描述的功能）。我需要侧边栏始终位于页眉和页脚之间的全高度（从页眉底部到页脚顶部）@赫里斯托，就用一张桌子？；-）@Rob…能给我看看3987中的至少一张吗？我打赌这不完全是我要找的…thirtydot@和@Lollero，我整天都在找它，我在asp.net母版页上尝试了你的两种方法，但都失败了，我发现这很有效。谢谢。注意侧边栏是如何延伸到页脚之外的。我需要它停在t他位于页脚顶部。@Warface..更新不起作用。我不希望页脚被修复。这不太正常。请注意侧边栏是如何延伸到页脚之外的。我需要它停在页脚顶部。天哪！这就是我尝试的。我使用的是
位置：绝对；顶部：50px；底部：50px；
，但它对我不起作用：（+1.做得很好！+1用于设置
顶部
和
底部
，我没有想到。我注意到当#侧边栏的文本内容向下延伸的长度超过#主内容时，侧边栏文本会延伸到页脚上方，而不是向下推并拉伸侧边栏背景。有解决方法吗？+1@thirtydot.This真是太神奇了。这个问题绝对需要重新命名。它应该会出现在第一个结果中。我已经找了好几天了，我甚至不相信这只在CSS上是可行的。非常感谢。@Petr'PePa'Pavel你可以添加位置：相对于页脚，你可以毫无问题地使用页脚中的链接。+1.interesting方法。这几乎就是我想要它做的，但我更喜欢@thirtydot的答案。谢谢你的回答！这很好。@Hristo:如果你可以不使用它，那就去吧。Lollero&thirtydot…这只是为了好玩，我只是好奇这是否只能用HTML/CSS来完成。可以！谢谢你的帮助！我很喜欢。这些问题类型是我在SO开始回答问题的原因。谢谢。：）这些类型的互动是我喜欢问此类问题的原因：）
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    left: 0;
    top: 50px;
    bottom: 50px;
}
#main {
    margin-left: 102px
}