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

查看全文

相关阅读:
BZOJ 1444 有趣的游戏(AC自动机+矩阵快速幂)
BZOJ 1190 梦幻岛宝珠(分组01背包)
BZOJ 1562 变换序列(二分图匹配)
BZOJ 1483 梦幻布丁(链表+启发式合并)
BZOJ 1222 产品加工(DP)
java GUI编程一
 java 网络编程
 java 异常
 java 线程二
 java 线程一

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