html div 屏幕最下部,将div的高度适合屏幕高度并将页脚固定到底部

我有一个网站，当页面没有足够的内容时，页脚向上移动并且不会粘到底部。我试着去弄清楚如何使脚注和头部伸展的可用空间之间的DIV为了使页脚留在底部，不可能是这个样子：将div的高度适合屏幕高度并将页脚固定到底部

我试着将我的身高设置为100％但不起作用。

HTML：

© Copyright by SimKessy

CSS：

body{

width: 100%; /*always specify this when using flexBox*/

height:100%;

display: -webkit-box;

display: -moz-box;

display: box;

text-align:center;

-webkit-box-pack:center; /*way of centering the website*/

-moz-box-pack:center;

box-pack:center;

background:url('images/bg/bg9.jpg') no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

}

#wrapper{

max-width: 850px;

display: -moz-box;

display: -webkit-box; /*means this is a box with children inside*/

-moz-box-orient:vertical;

-moz-box-flex:1;

-webkit-box-orient:vertical;

-webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/

background: rgba(0,0,0,0.7);

height:100%;

z-index: 1;

}

#body_div{

display: -webkit-box;

-webkit-box-orient:horizontal;

display: -moz-box;

-moz-box-orient:horizontal;

color:#000000;

margin-top: 190px;

height: 100%;

}

#main_section{

/* border:1px solid blue;*/

-webkit-box-flex: 1;

-moz-box-flex:1;

margin: 20px;

padding: 0px;

height:100%;

width: 100%;

}

2013-03-16

Batman

+0

谷歌粘页脚它展示了如何让你的网站页脚粘贴到页面底部。 –

2013-03-16 20:26:21

+0

嘿，对不起，解决方案有点让事情变得最糟糕。 –

2013-03-20 05:18:04

+0

啊。如果仍有问题，我可以编辑我的解决方案。可以详细说明下面的解决方案的问题是什么？如果需要，我会很高兴添加一些新的修补程序。 –

2013-03-20 05:19:45