底部自适应文档和窗口

来源：互联网发布：数据分析的道与术 pdf 编辑：程序博客网时间：2024/05/17 07:37

经常用到的一种布局：底部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>

阅读全文

0 0