当内容区域不满一屏时，footer一直在屏幕最下面

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body{height: 100%;}

        html{height: 100%;}

        .m-container{position: relative;min-height: 100%;height: auto !important;height: 100%;background-color: red;width: 100%;}

        .header{width: 100%;height: 20px;background-color: #000;}

        .main{padding-bottom: 140px;width: 100%;}   

        .footer{position: absolute;bottom: 0;background-color: #ccc;width: 100%;height: 140px;}

    </style>

</head>

<body>

    <div class="m-container">

        <div class="header"></div>

        <div class="main"></div>

        <div class="footer"></div>

    </div>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 迅雷页面
    不会用代码框，所以看着有些乱套，，，，html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 5,635评论 0赞 0
  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 13,301评论 0赞 8
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 28,403评论 1赞 45
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 8,412评论 0赞 11
  • 介绍一本戒朋友圈指南20180131
    首先宣告：今天关闭朋友圈第31天。前一天打开豆瓣，才发现一月看完了四本书。论文写完文献综述，有关论文的资料，单单论...
    872de7e484b5阅读 3,161评论 0赞 0

友情链接更多精彩内容