100%高度柱,带固定侧杆

时间:2013-03-16 18:27:38

标签: html css layout two-columns

我一直试图让这个工作。当主列的内容填充页面高度时,它看起来是正确的,但是当它没有填充页面高度时,它看起来是正确的。

看起来正确: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>

我正在使用固定的虚拟侧边栏,因此当您滚动主列时,它会保持在视图中。

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

.tabnav需要显示正文标记中的背景图片,因此.container-inner无法从页面顶部开始。

1 个答案:

答案 0 :(得分:3)

使用相同的CSS,使用large contentsmall content更新了演示。

更改摘要

修复主要内容

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

更新补充工具栏

  • #side.sidecontent设为height: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%;
    ...
}

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