CSS Sticky Footer完成编码

日期:2021-03-01 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

本文详细介绍了CSS Sticky Footer完成编码,共享给大伙儿,实际以下:

上图所显示信息的实际效果便是sticky Footer,当网页页面主题內容不足长时,footer精准定位在对话框的底部,当网页页面主题內容超过对话框后,footer显示信息在网页页面的最底部

下列得出几种完成计划方案:

1. FlexBox合理布局

HTML构造以下:

<body>

    <div class="header">Sticky Footer</div>

    <div class="content">

        <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body> 

关键CSS以下:

body{

    display: flex;

    flex-flow: column;

    min-height: 100vh;

}

.content{

    flex: 1;

}

FlexBox完成便是这么简易,完成实际效果也贴上来

贴图的实际效果仿佛不大好,可是实际效果是完成了的哦!!!!

2. 經典套路:padding-bottom + margin-top

HTML构造以下:

<body>

    <div class="wrapper clearfix">

        <div class="title">Sticky Footer</div>

        <div class="content">

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

关键CSS以下:

.wrapper{

    min-height: 100vh;

}

.content{

    padding-bottom: 50px;

}

.footer{

    height: 50px;

    margin-top: ⑸0px;

}

完成实际效果(觉得必须装个录屏手机软件了):

 

 

应用此计划方案时要留意下列几点:

1. wrapper的最少高宽比要等于对话框高宽比

2. content的padding-bottom、footer的margin-top和height这3个特性值的肯定值需维持1致(由于margin-top为负值,因此说肯定值);维持1致的缘故是更好的完成sticky footer,尽管height甚么的偏小也能完成sticky footer实际效果,可是给最底部留下了间隙。

3. 这类计划方案的适配性非常好,各大流行访问器都可,emmmmm,还非常好

4. 当行为主体应用飘浮合理布局的情况下,那末就必须考虑到1个适配性难题,这里应用的关键是以便Google chrome

上述第4条适配性处理计划方案:

给.wrapper再加知名的clearfix hack:

.clearfix{

    display: inline-block

}

.clearfix:after{

    display: block

    content: "."

    height: 0

    line-height: 0

    clear: both

    visibility: hidden

}

3. 固定不动高宽比的处理计划方案

HTML构造以下:

<body>

    <div class="wrapper">

        <div class="header">Sticky Footer</div>

        <div class="content">

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

            <p>检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测检测</p>

        </div>

    </div>

    <div class="footer">

        <p>This is footer</p>

    </div>

</body>

关键CSS款式以下:

.wrapper{

    min-height: calc(100vh - 50px);

    box-sizing: border-box;

}

注:50px为footer的高宽比,calc()运算符前后左右都必须保存1个空格。

結果我就不贴了,大伙儿自主脑补,跟上面的都类似。。。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。