底部自适应文档和窗口

经常用到的一种布局：底部footer需要永远在页面底部，即：窗口很小时，footer需要页面向下滚动出现，窗口很大时，footer就静静的呆在页面底部

第一种解决办法：自适应布局

通过screen的判断来动态给中间的content高度赋值,使content的高度始终能把footer挤到屏幕最下方

<style>
    @media screen and (max-height: 750px){
        #contentId{
            height: 783px;
        }
    }
    @media screen and (min-height: 750px){
        #contentId{
            height: 902px;
        }
    }
</style>

第二种方法：页面中间content的高度设置100%（前提是其父元素高度也为100%才有效），设置padding-bottom = footer的高度，设置footer的margin-top = 负的自己的高度

<style>
    /* 底部自适应文档和窗口  */
    html,body{
        width:100%;
        height:100%;
        margin:0;
    }
    .g-doc{
        position:relative;
        min-height:100%;
        _height:100%;
        overflow: scroll
    }
    .g-bd{
        padding:0 0 100px;
        zoom:1;
    }
    .g-bd p{
        height: 70px; 
        background: bisque
    }
    .g-ft{
        height:100px;
        margin:-100px 0 0;
        background:#dddddd;
    }

</style>
<div class="g-doc">
    <div class="g-bd">
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
        <p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
    </div>
</div>
<div class="g-ft">
    <p>底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部。</p>
</div>