页脚保持在底部

最新推荐文章于 2021-10-28 23:14:14 发布

Baddyo

最新推荐文章于 2021-10-28 23:14:14 发布

阅读量367

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Baddyo/article/details/78520879

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

状况描述：当页面内容不足一页时，页脚在视口底部；当内容超过一页，页脚在页面末端。
解决方案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
            .wrap{
                height: auto;
                min-height: 100%;
            }
            .header{
                background-color: #ffc543;
            }
            .footer{
                position: relative;
                margin-top: -60px;
                height: 60px;
                background-color: #ff5e2f;
            }

        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="header">
                head
            </div>

            <div class="content">
                content <br />

            </div>
        </div>

        <div class="footer">
            foot
        </div>
    </body>
</html>

Baddyo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页脚保持在底部

状况描述：当页面内容不足一页时，页脚在视口底部；当内容超过一页，页脚在页面末端。解决方案：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ pa
复制链接

扫一扫