博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 中 stick footer 布局实现
阅读量:7121 次
发布时间:2019-06-28

本文共 768 字,大约阅读时间需要 2 分钟。

做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮。stick footer 就是让 footer 元素固定在底部

  1. 当内容不足满屏时,footer 紧贴最底部
  2. 满屏需要下拉时,footer 就在内容的底部

以下主要用一种固定的结构实现 stick footer , 俗称套路, 看以下html结构:

css样式:

#wrap {        height: auto; min-height: 100%;    }    #main {        /* 必须使用和footer相同的高度 */        padding-bottom: 150px;    }     #footer {         position: relative;        /* footer高度的负值 */        margin-top: -150px;        height: 150px;        clear:both;    }    .clearfix:after {        content: ".";        display: block;        height: 0;        clear: both;        visibility: hidden;    }    .clearfix {        display: inline-block;    }

转载于:https://www.cnblogs.com/liuyishi/p/9529712.html

你可能感兴趣的文章
Theano2.1.10-基础知识之循环
查看>>
从Clarifai的估值聊聊深度学习
查看>>
(林雷看来13):功能优先,发展和重建同步,业绩后
查看>>
怎样找到native speaker的感觉
查看>>
关于如何学习
查看>>
用Java来写常见的排序算法
查看>>
C++链接ODBC数据源:VS2013,Access
查看>>
SQL Server 2014里的性能提升
查看>>
上海淘财经网要道歉客户的信
查看>>
oracle insert &字符插入问题
查看>>
jquery extend中
查看>>
Linux平台 Oracle 11gR2 RAC安装Part1:准备工作
查看>>
【linux高级程序设计】(第八章)进程管理与程序开发 4
查看>>
Merge Two Sorted Lists
查看>>
ElasticSearch实战-入门
查看>>
OpenResty(nginx)操作mysql的初步应用
查看>>
【C++实现】HeadFirst策略模式设计模式
查看>>
C keyword register 并讨论共同使用嵌入式汇编
查看>>
C语言第12轮:指针
查看>>
Redis性能问题排查解决手册(七)
查看>>