专栏首页javascript艺术完美解决footer固定在底部

完美解决footer固定在底部

完美解决footer固定在底部

很多人认为页面页脚部分不就是用footer主义化标签包起来嘛,然而不然;如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况:

导致这一问题的原因是页面内容太少,无法将内容区域撑开,从而在 footer 下面留下一大块空白;但是我们又希望footer能在窗口最底端。今天给大家介绍两种方法来完美解决这个问题:

方法一:footer高度固定+绝对定位 思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留(padding-bottom)footer的高度。 HTML代码:

<div id="container"> <header>HEADER</header> <section class="main">

MAIN

</section > <footer>FOOTER</footer> </div>

CSS代码:

*{ margin:0; padding:0; } html,body{ height: 100%; } #container{ /*保证footer是相对于co

ntainer位置绝对定位*/ position:relative; width:100%; min-height:100%; /*设置padding-bottom

值大于等于footer的height值,

以保证main的内容能够全部显示出

来而不被footer遮盖;*/ padding-bottom: 100px; box-sizing: border-box; } header{ width: 100%; height: 200px; background:#999; } .main{ width: 100%; height: 200px; background: orange; } footer{ width: 100%; height:100px;

/* footer的高度一定要是固定值*/ position:absolute; bottom:0px; left:0px; background:#333; }

如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部,且覆盖在内容上,这时候只要在footer的父元素样式上增加(overflow : hidden;)即可;

方法二:采用 flexbox布局模型 思路:我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局);同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。 HTML代码:

<div id="container"> <header>HEADER</header> <section class="main">

MAIN

</section> <footer>FOOTER</footer> </div>

CSS代码: 我们需要调整各个区域占用的页面空间,我们将通过flex 属性来达到这一目的,该属性实际包含了三个属性,分别是: (1)flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率; (2)flex-shrink:如果空间不足,元素的收缩比率; (3)flex-basis:元素的伸缩基准值;

*{ margin:0; padding:0; } html,body{ height: 100%; } #container{ display: flex; flex-direction: column; height: 100%; } header{ background:#999; flex: 0 0 auto; } .main{ background: orange; flex: 1 0 auto; } footer{ background:#333; flex: 0 0 auto; }

转载至http://blog.csdn.net/m0_38099607/article/details/71598423

sdzfgdhg

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:NINE-NINE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-03-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网页内容高度不够时,让footer处于页面底部的方法(不是固定在底部)

    有时候我们的需求是,当页面内容高于可视高度时,footer跟在内容最后,下拉滚动条才会显示。当页面内容少于一页,footer显示在最底部,而不是跟着内容显示到页...

    公众号php_pachong
  • 不可忽视的CSS布局

    CSS布局是一个前端必备的技能,HTML如果说是结构之美,CSS就是视觉之美可以给用户不一样的体验的效果和视觉冲击。如果一个大方美观的布局,用户第一眼看到会很舒...

    小丑同学
  • iPhone XR XS 底部固定定位偏移解决方案

    最近在做一个活动页时,发现当上滑页面时,底部固定定位的按钮也跟着移动了一点,当下滑时,又会回到原来位置。

    吴裕超
  • 用最简洁的 CSS 实现 10 种现代布局

    周日在家看 web.dev 的 2020 三天 live,发现不少有意思的东西,其中有一项是关于 CSS 的,主播是 Una Kravets(chrome te...

    桃翁
  • div定位在浏览器底部(CSS解决)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o...

    用户1730674
  • CSS Flexbox 布局完全指南 (二):3000字,多示例讲解

    理解 Flexbox 最好的方式是什么?学好基础,再大量练习。这正是我们要在这篇文章中做的事情。

    一只图雀
  • CSS 7:网页布局(传统布局,flex布局,布局套路)

    width: 1000px; //或 max-width: 1000px; margin-left: auto; margin-right: auto; 演示地...

    代码之风
  • css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

    左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

    xing.org1^
  • 智能下拉刷新框架-SmartRefreshLayout

    框架?下拉刷新控件还能框架化?智能?啥玩意来着?二话不多少先上Demo效果图,咱们再来探个究竟。 Github 传送门(https://github.com/s...

    非著名程序员
  • 完美解决虚拟按键遮盖底部视图的问题

    然而在开发过程中,有时候会涉及底部视图的开发,最终的结果却因为虚拟按键的关系,结果底部视图被虚拟按键给遮盖住了。

    砸漏
  • 面试必考点:前端布局知识

    这里所要介绍的布局知识主要是在解决三列布局模式而出现的几种布局解法,其中包含了经典的圣杯布局,双飞翼布局,绝对定位的布局方式,还包含2009年W3C所提出的Fl...

    用户1462769
  • CSS Viewport 单位,很多人还不知道使用它来快速布局!

    CSS Viewport units(视口单位)在过去几年已经出现了,随着时间的推移,越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J...

    前端小智@大迁世界
  • web前端技术课程内容详解之语义化标签的理解

    在学习HTML阶段的最后,我们会涉及到学习语义化标签,明明用div等标签就可以构成页面,那么为什么还会有语义化标签的存在?语义化标签到底是什么?学好语义化标签又...

    C4rpeDime
  • 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

    Sb_Coco
  • 最全的常见css布局

    对于第一种,先通过对 header,content,footer 统一设置 width:1000px;或者 max-width:1000px(这两者的区别是当屏...

    grain先森
  • 底部固定宽度 鼠标拉到最后宽度变小怎么解决

    后来网页改版,改变了dom结构,发现fixbottom不再浮动 ,解决方法是改变fixbottom的dom层级 让他与main层平行

    lilugirl
  • 实例详解:Flex布局(二)

    在之前的一篇文章:详解CSS的Flex布局中介绍了CSS的Flex布局的基本知识,包括flex-container的6个属性,以及flex-item的6个属性。...

    前端林子
  • ​day010:CSS如何进行圣杯布局

    这种float布局是最难理解的,主要是浮动后的负margin操作,这里重点强调一下。

    用户3806669
  • 圣杯布局与双飞翼布局

    上一篇文章介绍了三种方法实现CSS三栏布局,本文则在此基础上,进一步介绍常用的圣杯布局与双飞翼布局。

    前端林子

扫码关注云+社区

领取腾讯云代金券