欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    css实现footer定位
    <!DOCTYPEhtml><htmllang="en"><head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width,initial-scale=1.0">
    <metahttp-equiv="X-UA-Compatible"content="ie=edge">
    <title>Document</title>
    <scriptsrc="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js"type="text/javascript"></script>
    <style>
    html,body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    }
    *{
    margin:0;
    padding:0;
    }
    .box{
    width:100%;
    min-height:100%;
    padding-bottom:50px;
    box-sizing:border-box;
    background:#e4e4e4;
    }
    .content{
    background:#fff;
    border-bottom:1pxsolid#999;
    }
    button{
    margin:10pxauto;
    line-height:30px;
    width:20%;
    }
    footer{
    height:50px;
    line-height:50px;
    text-align:center;
    margin-top:-50px;
    background:#fff;
    }
    </style>
    </head>
    <body>
    <divclass="box">
    <buttononclick="beLong()">变长</button>
    <pclass="content"id="content">内容</p>
    </div>
    <footer>footer</footer></body><script>
    functionbeLong(){
    document.getElementById('content').style.height='1000px';
    }</script>
    </html>






本文转载自中文网
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r57070.shtml