一般的网站布局如下：
1、在内容少的时候底部会固定在浏览器底部；
2、内容过多时，底部在内容的下方。
实现的代码如下：
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding: 0;
text-align: center;
font-size: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
body{
position: absolute;
min-height: 100%;
width:100%;
}
.head{
height: 100px;
line-height: 100px;
border: 1px blue solid;
}
.content{
border: 1px #0f8f38 solid;
margin-top: 10px;
margin-bottom: 10px;
padding: 30px;
margin-bottom: 100px;
}
.footer{
height: 100px;
line-height: 100px;
border: 1px red solid;
position: absolute;
bottom: 0px;
width: 100%;
}
</style>
</head>
<body>
<div class="head">
头部
</div>
<div class="content">
内容
</div>
<div class="footer">
底部
</div>
</body>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于