zoukankan html css js c++ java

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弹性布局

查看全文

相关阅读:
非常可乐 HDU1495
POJ3660 暑假集训-最短路H题floyd
HDU2612 -暑假集训-搜索进阶N
POJ-3126 暑假集训-搜索进阶F题
 HDU2544最短路模板，
Alisha’s Party
Milking Grid poj2185
Period POJ
Power Strings POJ
Seek the Name, Seek the Fame （poj2752

原文地址：https://www.cnblogs.com/fjl-vxee/p/8641092.html