文档章节

前端开发:页脚固定顶部的方法

issac宝华
 issac宝华
发布于 2016/06/19 15:02
字数 439
阅读 32
收藏 1
点赞 0
评论 0

1 将html、body的高度设为100%,这样是为了使用body的子元素height:100%;生效(在我的另一篇博文有详细说明):

html,body{
   height: 100%;
   margin: 0;
   padding: 0;
}

2 基本布局:

<body>
<!--容器-->
<div class="container">
    <!--内容-->
    <div>
        <!--你的内容-->
    </div>
    <!--页脚-->
    <div class="footer">
        footer
    </div>
</div>
<body>

3 对容器进行css处理:

.container{
    min-height: 100%;
    /*border: 1px solid red;*/
    text-align: center;
    padding-bottom: 60px;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    position: relative;
}

4 对页脚进行css处理:

.footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: lavender;
    text-align: center;
}

Tip: 页脚要对“容器”进行绝对定位,而不是body。

5 完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS + DIV 让页脚始终底部</title>
    <meta name="generator" content="" />
    <!--在移动端按比例缩放-->
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <style>
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .container{
            min-height: 100%;
            /*border: 1px solid red;*/
            text-align: center;
            padding-bottom: 60px;
            box-sizing: border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
            position: relative;
        }
        .footer{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: lavender;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content-bottom
    </div>
    <div class="footer">
        footer
    </div>
</div>
<body>
</html>

当然,让页脚固定底部有很多方法,还想了解更多的方法,可以参考下面的博文:

http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page

© 著作权归作者所有

共有 人打赏支持
issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
CSS实现Sticky Footer

什么是 “Sticky Footer” 所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚...

流口水流
2017/11/19
0
0
页脚紧贴页面底部(sticky footer)实现方法汇总

页脚紧贴页面底部相信我们前端经常要使用,这里自己总结了下各个方法并简单介绍了下原理及注意点,大家可根据各优缺点进行取舍: 在线预览地址:https://codepen.io/anon/pen/XVmLJK 资料推荐...

该帐号已被查封
2017/12/17
0
0
footer页脚置底(5种)

原文链接 页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部;但如果网页内容不够长,置...

追风_
01/02
0
0
ionic教程之基本布局

目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.content和.scroll-content Hybrid vs. Others 要开...

汇智网
2017/09/18
0
0
如何构建下拉滑动式响应导航菜单

来源:GBin1.com 在线演示 在线下载 经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的...

gbin1
2013/08/29
167
0
网页WEB打印控件制作

在WEB系统中,打印的确是比较烦人的问题,如果我们能制作一个属于自己的自定义的打印插件,那么我们在后续自定义打印的时候能随心所欲的控制打印,这样的效果对于程序员来说是非常开心的一件...

CandyNext
2016/06/13
1K
6
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.1K
11
Fastreport.Net用户手册:Bands

Band是直接呈现在报表页面上的对象,也是其它对象如 "Text", "Picture" 等对象的容器。 总的来说,在FastReport中有13种类型的bands。band在报表中被打印的位置取决于其类型不同。 Band 打印...

鸟栖沙岩
2016/09/06
15
0
UI插件【B-JUI页面id唯一】

页面结构 B-JUI仅有一个主页面(document),框架内的所有子页面将通过Ajax获取后作为一个页面片段附加到主页面上,外部页面则通过iframe嵌入主页面。 主页面结构(仅body部分) 主页面由上(页头...

k_k_anna
2015/02/03
0
1
DevExpress v15.1:WPF控件升级(二)

<下载最新版DevExpress WPF Controls v15.1.5> WPF Pivot Grid Control Excel® Inspired条件格式 在新的版本中,我们引入了一个新的易于使用的方法在设计阶段和运行时管理格式规则。新的Exc...

Miss_Hello_World
2015/08/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
0
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0
《Linux Perf Master》Edition 0.4 发布

在线阅读:https://riboseyim.gitbook.io/perf 在线阅读:https://www.gitbook.com/book/riboseyim/linux-perf-master/details 百度网盘【pdf、mobi、ePub】:https://pan.baidu.com/s/1C20T......

RiboseYim
昨天
1
0
conda 换源

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/ conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/conda config --add channels https://mir......

阿豪boy
昨天
1
0
Confluence 6 安装补丁类文件

Atlassian 支持或者 Atlassian 缺陷修复小组可能针对有一些关键问题会提供补丁来解决这些问题,但是这些问题还没有放到下一个更新版本中。这些问题将会使用 Class 类文件同时在官方 Jira bug...

honeymose
昨天
0
0
非常实用的IDEA插件之总结

1、Alibaba Java Coding Guidelines 经过247天的持续研发,阿里巴巴于10月14日在杭州云栖大会上,正式发布众所期待的《阿里巴巴Java开发规约》扫描插件!该插件由阿里巴巴P3C项目组研发。P3C...

Gibbons
昨天
1
0
Tomcat介绍,安装jdk,安装tomcat,配置Tomcat监听80端口

Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 java程序写的网站用tomcat+jdk来运行...

TaoXu
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部