html使用页脚，标题和内容创建动态页面

Question

到目前为止，我得到了帮助：

当内容很大时，所有内容都会根据需要显示 - 性感。但是，当内容是例如1个页脚的情况时，内容会粘在内容的底部。

我需要一些魔法，因此页脚会粘贴到内容的末尾，但是当内容小于页面高度-500 px（页眉和页脚固定）时，页脚必须保留在页面底部。怎么做这样的魔术？见附图：

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;
}

这里是小提琴：http://jsfiddle.net/Cheese1991/VcK83/

示例：

从屏幕截图1我们看到我们的标题（300px，边距为30px），动态大小内容（从未知道）但是对于这个例子，可以说200px和页脚（100px）适合＆amp;（窗口）。高度（ ）在示例中是775px。

所以我们有775-330-200-100 = 145px的自由尺寸（白色空白区域）

我希望在可能性方面达到1：

1）内容将占用自由空间大小，因此html，body等仍将保持775px并且没有溢出（正确大小的滚动条）因为组件适合，我们不需要更多空间比我们有。

2）页脚将自己定位在底部（不是固定在页面上的位置，因为内容会隐藏在页面后面）

以下是图片中的两种可能性：

1）

2）

Answer 1

将min-height用于#content。见这 - jsfiddle

修改

* {
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: absolute;
    bottom: 0px;
    width: 100%;

background-color: orange;
}

并使用此Jquery代码

$(document).ready(function(){
    var $footer = $('#footer');

    var contentHeight = $('#content').outerHeight();
    var headerHeight = $('.header').outerHeight();
    var footerHeight = $footer.outerHeight();
    var bodyHeight = $('body').outerHeight();   
    var headerPContentPFooter = contentHeight+headerHeight+footerHeight;



    if(headerPContentPFooter > bodyHeight){
        $footer.css('position','relative');
    }

    $(window).resize(function(){
    var contentHeight = $('#content').outerHeight();
    var headerHeight = $('.header').outerHeight();
    var footerHeight = $('#footer').outerHeight();
    var bodyHeight = $('body').outerHeight();

    var headerPContentPFooter = contentHeight+headerHeight+footerHeight;

        if(headerPContentPFooter > bodyHeight){
            $footer.css('position','relative');
        }else{
            $footer.css('position','absolute');
        }   

    });
});