Html 100%高度边栏和一个不会停留在边栏下方的页脚

我需要一个粘性页脚和一个有侧边栏的内容区的组合帮助

这里有一个代码片段：

html，正文{
身高：100%；
}
/*强制页脚保持向下*/
#最外层包装{
最小高度：100%；
高度：自动！重要；
身高：100%；
保证金：0自动-50px；
}
.容器液体{
最大宽度：960像素；
填充：0；
保证金：0；
边框：1px点粉色；
}
#页眉{
边框：3件点蓝色；
}
.海图导航{
边框：2倍纯绿；
}
#页面内容{
边框：3个绿色虚线；
}
.图表侧栏包装器{
宽度：145px；
}
.人造边栏包装{
背景色：#E8E8E8；
最小高度：100px；
位置：绝对位置；
顶部：55px；/*顶部导航+海图导航高度（本例估计）*/
底部：50px；/*页脚高度*/
宽度：100%；
}
nav.navbar-default{
边缘底部：50px；
宽度：100%；
}
.人造边栏{
利润率：0.155px；
填充：0；
位置：相对位置；
身高：100%；
背景色：#F8；
左边框：1px实心fuschia；
最小高度：100px；
}
.页脚推送{
明确：两者皆有；
边框：3倍纯红；
高度：50px；
}
#页脚{
宽度：100%；
高度：50px；
边框：3倍纯红；
}

标题-蓝色虚线-保持在顶部
子标题-绿色实心-保持在顶部

菜单项
菜单项
菜单项

带有小部件的实际页面内容，以及不包含的内容
页脚-红色实心-停留在页脚下方，对于短内容，不要提起页面底部。

我认为这是一个布局，它代表了您的目标-查看JSFIDLE链接并调整页面大小。您可以看到，对于短内容，页脚位于页面底部。对于较长的内容，内容将页脚向下推过页面底部，页面滚动

根据中的代码改编的解决方案。唯一需要注意的是，要使此解决方案起作用，页脚需要有一个固定的高度（在本例中为60px）

JSFiddle：

现场演示：

html，正文{
保证金：0；
填充：0；
身高：100%；
}
#容器{
最小高度：100%；
位置：相对位置；
}
#标题{
背景：#ff0；
填充：10px；
}
#副标题{
填充：10px；
背景：浅蓝色；
}
#身体{
填充底部：60px；
溢出：自动；
/*页脚高度*/
}
#页脚{
位置：绝对位置；
底部：0；
宽度：100%；
高度：60px；
/*页脚高度*/
背景：#6cf；
}
/*其他非必需CSS*/
#收割台p，#收割台h1{
保证金：0；
填充：10px 0 10px；
}
#页脚p{
保证金：0；
填充：10px；
}
#c1{
浮动：左；
宽度：50%；
}
#c2{
浮动：左；
宽度：50%；
身高：100%；
}

标题1文本
标题2文本
第1列文本

第1列文本

第1列文本

第1列文本

第1列文本

第1列文本

第2列文本

第2列文本

第2列文本

第2列文本

第2列文本

第2列文本

页脚文本

这是一个版本的布局，使用固定在顶部的

导航栏和固定的侧栏，这样您的
主要内容就可以在所有内容下滚动。然后，您可以将侧边栏和页脚分层，使它们彼此重叠或重叠。现在它看起来是附加的，但是CSS很容易改变，所以一个可以覆盖另一个

侧边栏隐藏在360px下的视口中，但可以通过删除到媒体查询来恢复

希望能有帮助


body，
html{
位置：相对位置；
边缘顶部：125px；
边缘底部：50px；
}
.navbar.navbar-custom{
边界半径：0px；
边界：无；
背景#337ab7；
边框底部：1px实心#ff0；
}
.导航栏自定义。上导航{
字体大小：20px；
填充：9px 20px；
高度：50px；
颜色：#337ab7；
背景色：#fff；
}
.导航栏自定义。上导航img{
边际上限：0px；
}
.导航栏自定义.导航栏导航{
右边距：30px；
}
.导航栏自定义.导航按钮{
边界半径：0px；
背景：无；
边界：无；
颜色：#337ab7；
}
.navbar.navbar-custom.btn组.下拉菜单>li>a{
颜色：#fff；
}
.navbar.navbar-custom.btn组。下拉菜单>li>a:悬停{
颜色：#444；
}
.navbar.navbar-custom.navbar-nav>li>a{
颜色：#fff；
边界：无；
}
.navbar.navbar-custom.navbar品牌{
颜色：#fff；
}
.navbar.navbar-自定义.下拉菜单{
背景#266080；
}
.navbar自定义.navbar导航打开.下拉菜单>li>a，
.navbar自定义.navbar导航打开.下拉菜单{
颜色：#fff；
边界：无；
}
.navbar自定义.navbar导航打开.下拉菜单>li>a:悬停，
.navbar自定义.navbar导航打开.下拉菜单：悬停{
颜色：#fff；
边界：无；
}
.navbar.navbar-custom.navbar切换，
.navbar.navbar-custom.navbar切换：焦点，
.navbar.navbar-custom.navbar切换：悬停{
背景：无；
大纲：无；
盒影：无；
边界：无；
颜色：#fff；
}
.侧边栏已固定{
边缘顶部：100px；
填充：5px18px；
位置：固定；
宽度：200px；
身高：100%；
排名：0；
左：0；
背景#337ab7；
右边框：1px实心#ff0；
z指数：1500；
}
侧边栏列表{
列表样式：无；
显示：内联；
文本对齐：左对齐；
}
ul.sidebar-list>li{
F