当前位置: article > 正文

HTML中footer固定在页面底部的若干种方法_html页面导入页脚固定到底部

作者：小丑西瓜9 | 2024-02-11 20:54:21

踩

html页面导入页脚固定到底部

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/76913