Html页脚声明,HTML创建与页脚和页眉和内容

动态页面，以便与帮助，到目前为止，我有这样的：HTML创建与页脚和页眉和内容

当含量大，那么所有显示为需要 - 性感。但是，当内容是例如1行footer offcourse坚持内容的底部。

我需要一些魔力，以便页脚粘贴到内容的结尾，但是当内容小于页面高度时-500像素(页眉和页脚固定)比页脚必须保留在页面的底部。如何做这样的魔术？见所附图片：

CSS：

* {

padding: 0;

margin: 0;

}

html, body {

height: 100%;

width: 100%;

}

body{

}

.header{

width: 100%;

height: 300px;

padding-top: 30px;

background-color: gold;

}

#content{

width: 100%;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

background-color: yellow;

}

#footer{

width: 100%;

height: 100px;

position: relative;

z-index: 1;

background-color: orange;

}

例子：

从截图数1我们可以看到，我们的头(300px的边距30px)，动态大小的内容(从来不知道)，但对于这个例子，假设200px和footer(100px)适合&(窗口).height()，在这个例子中是775px。

因此，我们必须775-330-200-100 = 145px免费尺寸(白色空格)

我要实现从1到可能：

1)内容将采取自由空间大小，因此html，body等仍然保持775px，并且没有溢出(正确大小的滚动条)，因为组件符合要求，所以我们不需要比我们更多的空间。

2)页脚将自己定位在底部(不是位置予以确定在页面上，因为这样的内容将它背后隐藏)

这里是准备2张图片

1)

2)

2014-04-02

Cheese

+0

可能重复[你怎么页脚留在网页的底部？] (http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) –

+0

不是重复的，因为在那例如，如果内容为空，则仍然存在溢出 –