Maison > Article > interface Web > Comment implémenter le positionnement du pied de page en CSS (code complet)
Le contenu de cet article explique comment implémenter le positionnement du pied de page en CSS (code complet). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
CSS implémente le positionnement du pied de page
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="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: 1px solid #999;
}
button{
margin: 10px auto;
line-height: 30px;
width: 20%;
}
footer{
height: 50px;
line-height: 50px;
text-align: center;
margin-top: -50px;
background: #fff;
}
</style>
</head>
<body>
<div class="box">
<button onclick="beLong()">变长</button>
<p class="content" id="content">内容</p>
</div>
<footer>footer</footer></body><script>
function beLong() {
document.getElementById('content').style.height = '1000px';
}</script>
</html>Recommandations associées :
Compréhension approfondie de l'utilisation de la transition dans CSS3
Comment implémenter la technologie de découpe d'image via Sprites en CSS (avec code)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!