HTML中footer固定在页面底部的若干种方法

摇摇奶昔x

已于 2023-09-04 14:17:05 修改

阅读量1.7k

点赞数

分类专栏： HTML5 文章标签： html 前端

于 2020-03-27 14:57:08 首次发布

本文链接：https://blog.csdn.net/weixin_42508745/article/details/105141571

版权

HTML5 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>footer需要固定在底部</title>
        <style type="text/css">
            html,body{font-size: 14px;font-family: "微软雅黑";text-align: center;width: 100%;height: 100%; min-height: 100%;border:0;line-height: none;} 
            body{padding:0px; margin:0px ;}
            .container{position:relative;height: auto;min-height: 100%;margin: 0}
            .container .header{height: 100px;background: #0000FF;} 
            .container .push{padding-bottom: 100px;}
            .footer{position:relative;height: 100px;margin-top:-100px;background: #0000FF;}
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header"> 
            </div>
            <div class="content"> 
            </div>
            <div class="push"></div><!--push在此为footer占位，高度和footer的一样-->
        </div>
        <div class="footer">
            <p>底部文本</p>
        </div>
        
    </body>
</html>

其他：
http://www.taodudu.cc/news/show-307923.html?action=onClick
https://code84.com/735200.html

摇摇奶昔x

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML中footer固定在页面底部的若干种方法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>footer需要固定在底部</title> <style type="text/css"> html,body{fo...
复制链接

扫一扫

专栏目录