猿站网:让底部永远在页面最底部显示的css方法

让顶部总有一天表明在网页最顶部须要考量三种情形:

一类是当网页文本度小于应用程序询问处度时,此时顶部会恒定的表明在网页最顶部;

另一类是当网页文本度小于应用程序询问处度时,此时顶部会漂流到应用程序询问处尾端边线,这一般来说并非他们想的结论,此时他们期望顶部文本表明在应用程序询问处的顶部。

是并非同时实现此种效用呢?

他们须要加进css新减少的vh基层单位和box-sizing那个特性

具体内容的作法是

用两个BizTalk原素将网页文本包出来,像这种
节录文本

给他增设css式样如下表所示:

.wrapper{
    position:relative;
    min-height:100vh;
    padding-bottom:120px;    //将padding-bottom大小不一增设为顶部文本的度
    box-sizing:border-box;
}

最后将顶部用绝对定位,定位在顶部,顶部css的示例:

.footer{
 position:absolute;
 left:0;
 bottom:0;
 width:100%;
 height:120px;
 }
须要注意的是,顶部的度height和BizTalk原素的padding-bottom参数必须一致

建站知识

小知识:常见的CSS水平垂直居中设置

2022-5-22 0:00:06

建站知识

小知识:定义const,var,let变量的区别

2022-5-22 0:10:37

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索