文档章节

内容较少时,页面的footer始终显示在底部,不是使用fixed。

KavenSu
 KavenSu
发布于 2014/12/29 16:58
字数 293
阅读 1348
收藏 20

一、使用css,参考国外的一个解决方法:

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

How to use the CSS Sticky Footer on your website

Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).

  1. * {

  2. margin: 0;

  3. }

  4. html, body {

  5. height: 100%;

  6. }

  7. .wrapper {

  8. min-height: 100%;

  9. height: auto !important;

  10. height: 100%;

  11. margin: 0 auto -4em;

  12. }

  13. .footer, .push {

  14. height: 4em;

  15. }

Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.

  1. <html>

  2.     <head>

  3.         <link rel="stylesheet" href="layout.css" ... />

  4.     </head>

  5.     <body>

  6.         <div class="wrapper">

  7.             <p>Your website content here.</p>

  8.             <div class="push"></div>

  9.         </div>

  10.         <div class="footer">

  11.             <p>Copyright (c) 2008</p>

  12.         </div>

  13.     </body>

  14. </html>

二、使用js,参考这个:(本人未验证过,看代码应该可行)

http://jingyan.baidu.com/article/2fb0ba4054805900f2ec5f9d.html

  //footer吸底效果
    var _ch = $("#content").height();//这个就是你中间内容div的高度
    var _wh = $(window).height();//整个窗口的高度
    //console.log("window's height",_wh,"content's height",_ch,"_wh - _ch:",_wh - _ch);
    if(_wh - _ch > 192){
        $("#content").css("min-height",(_wh-192)+"px");
    }
    //希望这段代码对你有用!


© 著作权归作者所有

KavenSu
粉丝 6
博文 66
码字总数 16605
作品 0
深圳
私信 提问
加载中

评论(2)

香蕉你个巴拉
香蕉你个巴拉
第二个可以的!29
HonChy
HonChy
第一个方案,出乎意料。太有创造力了。
CSS实现footer“吸底”效果

我们经常会遇到这样的问题:如何用css来实现底部元素可“粘住底部”的效果,对于“粘住底部”,本文有两种理解: 一是无论内容的多少,我们都希望使按钮,固定于可视窗口的底部,且内容区是可...

Sunflower127
2018/10/10
0
0
【技巧篇】解决悬浮的、遮挡内容的处理技巧

引言 在现在的前端页面中,尤其是移动端,经常会需要将 或者是 模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示。 “回复主题”模块,就是跟随页面的浮动一直悬...

chokcoco
2015/03/27
0
0
Web移动端Fixed布局的解决方案

iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以下仅示意代码): 对应的样式如下: 然后看起来就是下面这个...

WolfX
2016/03/30
61
0
5 种常用布局的 flex 实现

Sticky Footer 经典的上-中-下布局。 当页面内容高度小于可视区域高度时,footer 吸附在底部;当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下方 demo link Fixed-Width Si...

meikidd
2017/11/29
0
0
周记3——解决fixed属性在ios软键盘弹出后失效的bug

  这周在做空间(“类似”qq空间)项目。首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部。此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了。后来发现,...

辛月
2018/08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅析大数据 学习大数据后能做什么

大数据时代的到来使得大数据开发人才迎来了前所未有的机遇和挑战!一个绝佳的入行机会摆在了众人面前!于是,很多人都在打听,大数据到底有何应用?可以用来做什么?好程序员今天就为大家作出...

好程序员IT
23分钟前
1
0
C# USB视频人脸检测

此程序基于 虹软人脸识别进行的开发 SDK下载地址:https://ai.arcsoft.com.cn/ucenter/user/reg?utm_source=csdn1&utm_medium=referral 前提条件 从虹软官网下载获取ArcFace引擎应用开发包,...

是哇兴哥棒棒哒
34分钟前
2
0
Vagrant虚拟机硬盘扩容

# 停止虚拟机vagrant halt <machine_name># 进入VirtualBox VMs目录,查看并记录原磁盘uuid,留作后用vboxmanage showhdinfo box-disk1.vmdk# 克隆磁盘,vmdk格式无法调整大小,需要...

sskill
35分钟前
1
0
分布式商业萌芽,银行迎来发展新机遇

01 分布式商业萌芽,银行迎来发展新机遇 金融界:近几年区块链的热度经历了过山车般的转折。目前追逐区块链的资本也开始冷静下来,于此同时,各大商业银行对区块链的研究应用也越来越多。您认...

Java领航员
41分钟前
3
0
Spring系列教程六: Spring jdbcTemplate在Dao中的使用

概念 Spring中的jdbcTemplate的主要作用是实现数据的交互,下面我们就在dao层中如何使用jdbctemplate写测试案例 项目目录如下 基于xml实现jdbctemplate 这里我们使用的是JdbcDaoSupport这个类...

我叫小糖主
45分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部