带固定边栏的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> 

我使用的是固定的一个虚假的侧边栏列，所以当你滚动主柱它停留在视图中。

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

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

Answer 1

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

的变化

摘要修复的主要内容

• 应用白色背景颜色既.container-wrap和.container-inner。
• Set .container and .container-wrap to 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 */ 
    ... 
}