css如何实现footer定位

2024-01-17 14:44 小编

  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>

Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码