您现在的位置是：网站首页>列表内容

使用常见的sticky footer布局方式_CSS教程_CSS_网页制作_

2021-09-10 19:28:47 749人已围观

简介这篇文章主要介绍了使用常见的sticky footer布局方式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

什么是sticky footer布局

我们常见的网站页面都会把一个页面分为：头部区、内容区、页脚区,当头部区和内容区内容较少时,页脚区能固定在网页底部,而不是随着文档流排布。当页面内容较多时，页脚能随着文档内容自动撑开,显示在页面的最底部。这就是sticky footer布局。

实现方式

flex 实现

html代码


    
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚
        近段时间房管局四大金刚

css代码

*{
    margin: 0;
    padding: 0;
}
html,body{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}
.header{
    background: gray;
    height: 20px;
}
.content{
    flex: 1;
    overflow: auto;
    background: greenyellow;
}
.footer{
    background: pink;
    height: 20px;
}

flex布局方法简单代码少，因为pc端兼容性不是很好，可以广泛用于移动端。

负margin布局方式

html代码


        
            这里是头部
        
        
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
            近段时间房管局四大金刚
        
    
    
        © 2017 No rights reserved.
        Made with ♥ by an anonymous pastafarian.

css代码

* {
    margin: 0;
    padding: 0;
    text-align: center;
}

.wrapper {
    min-height: 100%;
    width: 100%;
}

.main {
    margin-top: 64px;
    padding-bottom: 64px;
}

.footer {
    margin: -64px auto 0 auto;
    background: orange;
}

.clearfix::after {
    display: block;
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
}

这是兼容性最好的方案,各大浏览器都可兼容，就是需要提前知道footer的高度。且结构相对复杂。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css魔法之左边竖条的多种实现方法_CSS教程_CSS_网页制作_

下一篇：CSS实现鼠标移动到图片或按钮上改变大小的方法示例_CSS教程_CSS_网页制作_

点击排行

万千回忆斩系S级武器属性一览_手机游戏_游戏攻略_

本栏推荐

万千回忆斩系S级武器属性一览_手机游戏_游戏攻略_