html - 带有固定侧边栏的 100% 高度列

Question

我一直在努力让它发挥作用。当主栏的内容填满页面高度时看起来是正确的，但不填满时就不是这样了。

看起来正确:http://jsfiddle.net/creativetags/ngv4H/1/

看起来不对:http://jsfiddle.net/creativetags/EAuBc/1/

<div class='container'>
    <div class='container-wrap'>
        <nav class='tabnav'>Some nav menu items here</nav>
        <div class='container-inner'>
            <div class='clearfix' id='mainwrap'>
                <div class='columns' id='main'>
                     <h2>Main content scrolls here</h2>
                </div>
            </div>
            <div class='columns' id='side'>
                <div class="sidecontent">
                    <p>Fixed Side panel</p>
                </div>
            </div>
        </div>
    </div>
</div>

我使用的是固定的人造侧边栏列，因此当您滚动主列时，它会保持在 View 中。

我需要 .container-inner 的背景填充到页面底部，即使内容没有到达底部。

.tabnav需要显示body标签的背景图片，所以.container-inner不能从页面顶部开始。

Answer 1

使用 large content 更新了演示和 small content ，使用相同的 CSS。

变更摘要

修复主要内容

• 将白色 bg 颜色应用于 .container-wrap 和 .container-inner。
• 将 .container 和 .container-wrap 设置为 height:100%;。
• .tabnav 下的背景图像现在被白色 bg 颜色覆盖，因此将 bg 图像重新应用到 .tabnav。 这是解决方案的关键部分。

更新侧边栏

• 将#side和.sidecontent设置为height:100%;。
• 将侧面背景图像从 .container 移动到 .sidecontent。

添加了 CSS

.container {
    height: 100%;
    ...
}
.container-wrap {
    width: 660px;
    height: 100%;
    background-color: #f8f8f8;
}
.tabnav {
    background: #1d1d1b url("http://cat.storehousebelfast.com/assets/bg.jpg") repeat fixed top left;
}
#side {
    height: 100%;
    ...
}
.sidecontent {
    background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;
    height: 100%;
    ...
}

CSS 已移除

.container {
    background: transparent url("http://cat.storehousebelfast.com/assets/right-column.gif") repeat-y top right;   /* Remove this */
    ...
}
.container-inner {
    min-height: 100%;   /* Remove this */
    height: 100%;       /* Remove this */
    ...
}