通常在页面中，需要使页脚 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. LeetCode题解之Counting Bits

    1.题目描述 2.问题分析 利用bitset. 3 代码 vector<int> countBits(int num) { vector<int> v; ; i <= n ...

  2. Oracle EBS OPM 生产批创建事务处理

    --生产批创建事物处理 --created by jenrry DECLARE p_mmti_rec mtl_transactions_interface%ROWTYPE; p_mmli_tbl gm ...

  3. Oracle EBS AR 客户API

    ------------------------------------ 1. Set Environment ------------------------------------ -- 1a. ...

  4. 在SQL Server中用好模糊查询指令LIKE (转载)

    like在sql中的使用:在SQL Server中用好模糊查询指令LIKE:查询是SQL Server中重要的功能,而在查询中将Like用上,可以搜索到一些意想不到的结果和效果,like的神奇 一.一 ...

  5. Character Sets: Migrating to utf8mb4 with pt_online_schema_change

    David Berube  | June 12, 2018 |  Posted In: MySQL Modern applications often feature the use of data ...

  6. SQL Server 复制表结构、整表数据

    1.将表1结构复制到表2 SELECT * INTO 表2 FROM 表1 WHERE 1=2 2.将表1内容全部复制到表2 SELECT * INTO 表2 FROM 表1

  7. PHP 与 YAML

    PHP 与 YAML 这一段时间都没有写blog,并不是因为事情多,而是自己变懒了.看到新技术也不愿意深入思考其背后的原理,学习C++语言了近一个多月,由于学习方法有问题,并没有什么项目可以练手.靠每 ...

  8. sysbench压力测试工具安装及使用

    使用sysbench指定连接的时候不需要写上mysql-socket参数 如果自己使用sysbench来测试mysql性能的话,建议使用源码编译比较好,版本为0.4版本. 步骤是: .yum inst ...

  9. SQL 性能不佳的几个原因

    •不准确的统计数据•差劲的索引•差劲的查询设计 •差劲的执行计划,通常是由不正确的参数引起的•过度阻塞和死锁 •非基于集合的操作•不良数据库设计 •过度碎片 •不能重复使用执行计划 •查询频繁重编译 ...

  10. 何为用户体验？附《用户体验的要素》PDF版下载

    一.什么是用户体验? 用户体验(User Experience,简称UE/UX)是用户在使用产品过程中建立起来的一种纯主观感受.但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实 ...