通常在页面中，需要使页脚 footer 部分始终处于底部。当页面高度不够 100% 时， footer 处于页面最底部，当页面内容高于 100% 时，页脚元素可以被撑到最底部。

方法一：绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>旋转六面体动画</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            box-sizing: border-box;

        }

        html {

            height: 100%

        }

        /* 这里footer的父元素为 body, 实际应用中，不一定要以body为父元素，只要确保footer的父元素的最小高度为100%就行 */

        body {

            position: relative;

            min-height: 100%;

            padding: 0;

            padding-bottom: 40px;

        }

        #footer {

            height: 40px;

            background: #eee;

            width: 100%;

            position: absolute;

            bottom: 0;

        }

    </style>

</head>

<body>

    <div class="box">

        <h1>content</h1>

        <h1>content</h1>

        <h1>content</h1>

        <h1>content</h1>

        <h1>content</h1>

    </div>

    <footer id="footer">

        <p>footer footer footer</p>

    </footer>

</body>

</html>

方法二: flex 布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>footer</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            box-sizing: border-box;

        }

        html {

            height: 100%

        }

        body {

            height: 100%;

            display: flex;

            flex-direction: column;

        }

        #header {

            height: 40px;

            background: red;

            flex: 0 0 auto;

        }

        #box {

            background: #eee;

            flex: 1 0 auto;

        }

        #footer {

            height: 40px;

            background: rgb(129, 129, 201);

            flex: 0 0 auto;

        }

    </style>

</head>

<body>

    <header id="header">

        header header header

    </header>

    <div id="box">

        <h1>content</h1>

        <h1>content</h1>

        <h1>content</h1>

        <h1>content</h1>

        <h1>content</h1>

    </div>

    <footer id="footer">

        <p>footer footer footer</p>

    </footer>

</body>

</html>

HTML 中使 footer 始终处于页面底部的更多相关文章

  1. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  2. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  3. 使用css方法使footer保持在页面的最底部

    使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...

  4. footer始终在页面最底部的方法（问题待检验）

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  5. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  6. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  7. 解决Web开发HTML页面中footer保持在页面底部问题

    如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...

  8. 页面内容不够高footer始终位于页面的最底部

    相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

  9. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

随机推荐

  1. python实现简单的负载均衡

    提到分发请求,相信大多数人首先会想到Nginx,Nginx作为一种多功能服务器,不仅提供了反向代理隐藏主机ip的能力,还拥有简单的缓存加速功能.当然Nginx最强大的功能还是分发请求,不仅提供了哈希, ...

  2. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  3. PHP 传值操作和传地址操作

    PHP中有两种赋值操作 一种是传值操作 example: $a = 1; $b = $b; 这个就是传值 传地址是: example2: $a = 1; $b = &$a; 这两者有什么区别呢 ...

  4. 【史上最全】申请配置阿里云服务器，并部署IIS和开发环境，项目上线经验

    最近一年在实验室做web后端开发,涉及到一些和服务器搭建及部署上线项目的相关经验,写个帖子和小伙伴们分享,一同进步! 首先谈一下,为什么越来越多中小型公司/实验室,部署项目的趋势都是在云服务器而不是普 ...

  5. MYSQL导入csv类型的数据出现The MySQL server is running with the --secure-file-priv option

    今天尝试使用 into outfile导出数据的时候出现错误: The MySQL server is running with the --secure-file-priv option so it ...

  6. T4学习- 4、Kalman Studio-T4代码生成器

    开源代码生成器-Kalman Studio https://github.com/loamen/Kalman.Studio 软件主要功能如下: 1.基于T4的代码生成工具,根据数据库元数据信息生成代码 ...

  7. ConstraintLayout使用手册

    1. 解决痛点 主要用拖拽 解决嵌套过多 2. 简易使用手册 增加约束 四个角直接拖拽就好了 删除约束 match_constraint 属性 这个属性类似于match_parent,去掉margin ...

  8. mac apache的使用

    因为apache的安装目录/private/etc是默认隐藏的,所以我们需要通过文件夹前往/命令行的方法去找. 或命令行中输入: userdeMBP:~ user$ open /etc 然后都会打开相 ...

  9. oracle kill 锁

    select object_name as 对象名称,s.sid,s.serial#,p.spid as 系统进程号 from v$locked_object l , dba_objects o , ...

  10. VS2010自行编译OpenCV2.4.4时缺少python27_d.lib的解决方法

    错误 24 error LNK1104: 无法打开文件“python27_d.lib”  C:\OpenCV\VS2013_64\modules\python\LINK opencv_python 编 ...