html侧边栏怎么布局,另一个HTML/CSS布局挑战 – 全高度侧边栏粘贴页脚

更新2

所以当#main中的内容增加时，它应该向下推页脚，就像这样：

所以页脚不应该是位置：固定。当内容不足时，应该在底部，当页面的高度比内容高的时候应该被压下。

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

UPDATE

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

这对我来说是相当的挑战。想法…？

我试图使这个布局工作，而不使用JavaScript …这是我的意思在图片形式：

BAD …当前布局

好…想要布局

…和代码，以防jsFiddle关闭…

HTML

Header

Sidebar
Sidebar
Sidebar

Main

Footer

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;

}

有什么建议如何做到这一点？我已经尝试使用位置：固定，但当页面足够大，您需要滚动时，该方法变得非常难看。