Html 带固定边栏的100%高度柱

我一直在努力让它发挥作用。当主列的内容填充页面高度时，它看起来是正确的，但当它没有填充页面高度时，它看起来不是正确的

看起来不错：

看起来不对劲：

这里有一些导航菜单项
主要内容在此滚动
固定侧板

我使用的是一个固定的人造边栏栏栏，所以当你滚动主栏时，它会保持在视图中

我需要

.container inner

的背景填充到页面底部，即使内容没有到达底部

.tabnav

需要显示body标签中的背景图像，因此

.container inner

不能从页面顶部开始。

使用相同的CSS更新了演示

变更摘要

确定主要内容

• 将白色bg颜色应用于

  .container wrap

  和

  .container inner

• 将

  .container

  和

  .container wrap

  设置为

  高度：100%

• .tabnav

  下面的背景图像现在被白色背景覆盖，因此请将背景图像重新应用于

  .tabnav

  这是解决方案的关键部分

更新侧栏

• 将

  #side

  和

  .sidecontent

  设置为

  高度：100%

• 将侧面bg图像从

  .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%;
    ...
}

.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 */
    ...
}

删除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%;
    ...
}

.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 */
    ...
}

---

谢谢@Matt。这是一个合理的解决方案-非常有文档记录的更改！