Home >Web Front-end >CSS Tutorial >How to implement footer positioning in css (complete code)
How to implement footer positioning in css (complete code)
- 不言Original
- 2018-09-11 17:28:492267browse
The content of this article is about how to implement footer positioning in CSS (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
CSS implements footer positioning
<!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>Related recommendations:
In-depth understanding of how to use transition in CSS3
How to implement image cutting technology through Sprites in CSS (with code)
The above is the detailed content of How to implement footer positioning in css (complete code). For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS code to implement four direction arrowsNext article：CSS code to implement four direction arrows