CSS 实现footer置底

1.将内容部分的margin-bottom设置为负数

<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;}
.wrapper{
    min-height:100%;
    margin-bottom:-50px;/* 等于footer的高度 */
}
.footer, .push{
    height: 50px;
    background:red;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="push"></div>
</div>
<div class="footer">footer</div>
</body>

2. 将页脚的margin-top设置为负数

<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;}
.content{
    min-height:100%;
}
.content-inside{
    padding:20px;
    padding-bottom:50px;
    background:blue;
}
.footer{
    height: 50px;
    background:red;
    margin-top:-50px;
}
</style>
</head>
<body>
<div class="content">
    <div class="content-inside"></div>
</div>
<div class="footer">footer</div>
</body>

3.使用calc设置内容高度

<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;}
.content{
    height: calc(100% - 50px);
}
.footer{
    background:red;
    height: 50px;
}
</style>
</head>
<body>
<div class="content">
</div>
<div class="footer">footer</div>
</body>

4.使用flex弹性布局

posted @ 2018-03-24 19:39  vxee  阅读(182)  评论(0)  编辑  收藏  举报