html 页码设计,html – 创建一个页脚结构,页脚底部和100％内容

我想为网页设计一个结构,但我有一个问题,我不能单独使用它.这就是我要的：

一个包含3个部分的网页：

1-header

2-content( has 2 parts, a sidebar and a content section)

3-footer

我想要这些特点：

1- if in the content section there is nothing then footer stays at the bottom, if we have content, footer pushes down and stays after my content

2- my sidebar(exist in the content section) take 100% height of content section and connects to footer

像这样：

我用这个代码构建它并且它可以工作,但我的问题是如果侧边栏区域的内容变大,侧边栏和主要内容区域重叠页脚！我希望在这种情况下,页脚会停留在我的内容之后.

我使用Twitter Bootstrap来完成我的工作.我不想使用仅在新浏览器中可用的方法.至少IE 9.

这是我的代码：

test

header

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

content

footer

footer

footer

footer

footer

这是CSS：

body,html{

height: 100%;

}

.container-fluid {

height:100%;

}

.header{

background-color: #ccff55;

}

.content{

background-color: #445566;

height: -webkit-calc(100% - 10%);

}

.sidebar{

background-color: #446655;

height: 100%;

}

.footer{

background-color: #11ff99;

}