通常在页面中，需要使页脚 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. Javascript执行流总结

    面对各种各样的JavaScript代码,我们有时候难免会犯错.可当自己仔细研究一下,哦原来是这么回事.有时候怎么会想为什么Javascript程序会是这样执行的呢?为什么没有得到自己预期的答案呢?自己 ...

  2. T-SQL查询两个日期之间的休息日（周六周日）天数

    SELECT COUNT(*) FROM MASTER..SPT_VALUES WHERE TYPE = 'P' AND DATEADD(DAY,NUMBER,'2014-03-13')<='2 ...

  3. Linux运维之批量下载指定网站的100个图片文件，并找出大于200KB的文件

    题目为:  有一百个图片文件,它们的地址都是http://down.fengge.com/img/1.pnghttp://down.fengge.com/img/2.png…一直到http://dow ...

  4. 第 14 章 结构和其他数据形式（enum枚举）

    /*----------------------------- enum.c -- 使用枚举类型的值 -----------------------------*/ #include <stdi ...

  5. MySQL C API 访问 MySQL 示例

    代码: /* Simple C program that connects to MySQL Database server */ #include <mysql.h> #include ...

  6. Spring Boot 验证表单

    在实际工作中,得到数据后的第一步就是验证数据的正确性,如果存在录入上的问题,一般会通过注解校验,发现错误后返回给用户,但是对于逻辑上的错误,很难使用注解方式进行验证了,这个使用可以使用Spring所提 ...

  7. 【Alpha go】Day 2！

    [Alpha go]Day 2! Part 0 · 简要目录 Part 1 · 项目燃尽图 Part 2 · 项目进展 Part 3 · 站立式会议照片 Part 4 · Scrum 摘要 Part ...

  8. FastDFS分布文件系统Java客户端使用

    原文链接:http://blog.csdn.net/xyang81/article/details/52847311 Java客户端源代码和jar:链接:http://pan.baidu.com/s/ ...

  9. CSS中如何选择ul下li的奇数、偶数行

    <style> #Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行 #Ulist li:nth-of-type(even){margin- ...

  10. [GXOI/GZOI2019]逼死强迫症

    题目 设我们最后的答案是\(g_n\) 我们发现在最后竖着放一个\(2\times 1\)的,和横着放两个\(1\times 2\)的就可以区分开之前的方案了 所以如果仅仅使用\(1\times 2\ ...