css实现让页面的footer始终位于底部

最新推荐文章于 2024-07-13 10:04:53 发布

風缘

最新推荐文章于 2024-07-13 10:04:53 发布

阅读量1.3w

点赞数 5

分类专栏： css

本文链接：https://blog.csdn.net/liangrongliu1991/article/details/79580953

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在写html页面布局的时候经常会遇到这样的情况：当页面内容较少的时候footer下面会有留白这样会很不好看，直接给footer，fixed定位的话当页面内容多的时候，footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。

方法一：

<body>
<div class="page">
<header> 头部 </header> <div class="content"> <p class="内容区"></p> </div> <footer> 底部 </footer></div></body>

*{
            padding:0;
            margin:0
        }
       html,body{
           height: 100%;
        }
        .page{
            box-sizing: border-box;
            min-height: 100%;
            position: relative;
            padding-bottom:100px;
        }
        header{
            height: 60px;
            background: #0d6aad;
        }
        .content{
            background: #00c7a6;
        }
        footer{
            width: 100%;
            height: 100px;
            background: #1ab7ea;
            position: absolute;
            bottom:0;
            left: 0;
        }

方法二：

其实是对方法一做一些改造，html结构和方法一中的一样。

*{
            padding:0;
            margin:0
        }
       html,body{
           height: 100%;
        }
        .page{
            min-height: 100%;
            position: relative;
        }
        header{
            height: 60px;
            background: #0d6aad;
        }
        .content{
            background: #00c7a6;
            padding-bottom:100px;
        }
        footer{
            width: 100%;
            height: 100px;
            background: #1ab7ea;
            opacity: 0.6;
            position: absolute;
            bottom:0;
            left: 0;
        }

方法三：使用flexbox布局

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
}

.page{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    background: #999;
    flex: 0 0 auto;
}
.content{
    background: orange;
    flex: 1 0 auto;
}
footer{
    background: #333;
    flex: 0 0 auto;
}

方法四：flexbox布局的另一种实现

.content设置为100%，header便会自动吸顶，footer变会自动吸底

.page{
    display: flex;
    flex-direction: column;
}
header{
    background: #999;
    height: 100px;
}
.content{
    background: orange;
    height: 100%;
}
footer{
    background: #333;
     height: 100px;
}

風缘

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
css实现让页面的footer始终位于底部

在写html页面布局的时候经常会遇到这样的情况：当页面内容较少的时候footer下面会有留白这样会很不好看，直接给footer，fixed定位的话当页面内容多的时候，footer又会盖住下面的内容。下面介绍几种方法让页面的footer始终位于底部。方法一：<body><div class="page"><header> 头部 </header...
复制链接

扫一扫

专栏目录