css中底部sticky footer

wenzi 发布于2019-08-29 14:11 / 1922人阅读

摘要：设计是最古老和最常见的效果之一，它可以概括如下如果页面内容不够长的时候，页脚块粘贴在视窗底部如果内容足够长时，页脚块会被内容向下推送。所有内容区好，方法一也比较推荐，以上就是个人对的理解

Sticky footers设计是最古老和最常见的效果之一，它可以概括如下：

1 如果页面内容不够长的时候，页脚块粘贴在视窗底部；
2 如果内容足够长时，页脚块会被内容向下推送。

出现问题如图：

方法一：经典固定高度套路
·html内容：


    
        这里是content

为内容区域添加外层包裹的wrapper,设置css样式
·css内容：

html, body, .wrapper {
 height: 100%;
}
body > .wrapper {
     height: auto;
     min-height: 100%;
}
.content {
     /* 必须使用和footer相同的高度 为底部留白 */
    padding-bottom: 150px;
}  
.footer {
    position: relative;
    /* footer高度的负值 */
    margin-top: -150px; 
    height: 150px;
    clear:both;
}
重要的是需要设置min-height:100%,内容区域padding-bottom: 150px;尾部margin-top: -150px; 
这个方法兼容性很好，实测 IE7 也能正常展示，为了更好的兼容性，可以为wrapper添加清除浮动
    .clearfix{
         display: inline-block;
    }
    .clearfix:after {
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
    }

方法二:Flexbox布局
html:


  内容区域


  页脚块

css:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}
body .content {
  flex: 1;
}

这个方法精简，当然缺点也是显而易见的，只有 IE10 及以上的浏览器才支持 flex 布局
方法三：内容区域计算最小的高度

这种方法通过vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。

html:


　　
　　    所有内容区

css:

.content{
 min-height:calc(100vh - 7em);
 box-sizing:border-box;
} 
.footer{
    height:7em;
    width:100%;
}

ok,好，方法一也比较推荐，以上就是个人对sticky Footer的理解(❤ ω ❤)

GPU云服务器云服务器 footer页面底部 CSS Sticky footer，css css中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112972.html

Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

张汉庆 2019-08-30 11:03 评论0 收藏0
Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

PrototypeZ 2019-08-02 15:13 评论0 收藏0
让footer固定在页面（视口）底部

摘要：让固定在页面视口底部这是一个让网站固定在浏览器页面内容小于浏览器高度时页面底部的技巧。如何通过用让固定在页面顶部。负外边距应该与的整体高度相等包括。没有内容会超出和的标签，除非超出内容是通过的绝对定位。让footer固定在页面（视口）底部（CSS-Sticky-Footer）这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现...

Lemon_95 2019-08-28 18:26 评论0 收藏0
让footer固定在页面（视口）底部

摘要：让固定在页面视口底部这是一个让网站固定在浏览器页面内容小于浏览器高度时页面底部的技巧。如何通过用让固定在页面顶部。负外边距应该与的整体高度相等包括。没有内容会超出和的标签，除非超出内容是通过的绝对定位。让footer固定在页面（视口）底部（CSS-Sticky-Footer）这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧。由HTML和CSS实现...

liaosilzu2007 2019-08-01 14:57 评论0 收藏0
CSS Sticky Footer

摘要：这样下来我们就可以测试代码了，然后发现如果内容多到一定程度之后小叉虽然被挤出屏幕外了，但是却挡在了文字前面，所以我们这里在里面的内容器加上了一个这样文字就不会再被挡住了。最近碰巧再看网上那一套火的不得了的高仿饿了么的视频，正巧看到一个css技巧，看了一下觉得挺简单，但是却又非常精髓，而平时公司项目和自己练手的项目里面都没有这样的需求，在这里就简单的讲述一下这个技巧（你就当我在这里做个...

wemall 2019-08-30 15:52 评论0 收藏0