说明

最近在布局自己的博客系统，我是想练练手把时下比较流行的前后端技术串起来。同时，我会把设计和编码过程中遇到的问题或值得分享的技术点、实现方式做下总结，记录下来。本篇就是第一篇，个人能力有限，不足之处欢迎指正。大家一起交流，共同进步是我写博客的初衷。

我们知道要想让页脚DIV始终固定在底部有几种实现方式。

1.是靠绝对定位position:absoute实现div固定在屏幕下方。

2.靠margin-top:-xx像素；实现div始终固定在页面下方。

我觉着第2种更适合我。第1种在你页面滚动时屏幕下方始终有个固定区域视觉上感觉不太好。

下面就看下第2种的实现效果：

实现效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        body {

            width: 50%;

            height: 100%;

            font-size: 24px;

            text-align: center;

            margin: 0 auto;

        }

        .container {

            height: 100%;

            padding-bottom: 100px;

        }

        .header {

            height: 100px;

            background-color: goldenrod;

        }

        .content {

            background-color: green;

        }

        .content p{

            margin: 10px 0;

        }

        .footer {

            height: 100px;

            margin-top: -100px;

            background-color: yellowgreen;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header">

            页头

        </div>

        <div class="content">

            <p>

                第一章　一般规定

                第一条 立法目的

                为了保护合同当事人的合法权益，维护社会经济秩序，促进社会主义现代化建设，制定本法。

                第二条 合同定义

                本法所称合同是平等主体的自然人、法人、其他组织之间设立、变更、终止民事权利义务关系的协议。 婚姻、收养、监护等有关身份关系的协议，适用其他法律的规定。

                第三条 平等原则

                合同当事人的法律地位平等，一方不得将自己的意志强加给另一方。

                第四条 合同自由原则

                当事人依法享有自愿订立合同的权利，任何单位和个人不得非法干预。

                第五条 公平原则

                当事人应当遵循公平原则确定各方的权利和义务。

                第六条 诚实信用原则

                当事人行使权利、履行义务应当遵循诚实信用原则。

                第七条 遵纪守法原则

                当事人订立、履行合同，应当遵守法律、行政法规，尊重社会公德，不得扰乱社会经济秩序，损害社会公共利益。

                第八条 依合同履行义务原则

                依法成立的合同，对当事人具有法律约束力。当事人应当按照约定履行自己的义务，不得擅自变更或者解除合同。 依法成立的合同，受法律保护。

                第二章　合同的订立

                第九条 订立合同的能力

                当事人订立合同，应当具有相应的民事权利能力和民事行为能力。 当事人依法可以委托代理人订立合同。

                第十条 合同的形式

                当事人订立合同，有书面形式、口头形式和其他形式。 法律、行政法规规定采用书面形式的，应当采用书面形式。当事人约定采用书面形式的，应当采用书面形式。

                第十一条 书面形式

                书面形式是指合同书、信件和数据电文（包括电报、电传、传真、电子数据交换和电子邮件）等可以有形地表现所载内容的形式。

                第十二条 合同内容

                合同的内容由当事人约定，一般包括以下条款： （一）当事人的名称或者姓名和住所； （二）标的； （三）数量； （四）质量； （五）价款或者报酬； （六）履行期限、地点和方式； （七）违约责任；

                （八）解决争议的方法。

                当事人可以参照各类合同的示范文本订立合同。

                第十三条 订立合同方式

                当事人订立合同，采取要约、承诺方式。

                第十四条 要约

                要约是希望和他人订立合同的意思表示，该意思表示应当符合下列规定： （一）内容具体确定； （二）表明经受要约人承诺，要约人即受该意思表示约束。

            </p>

        </div>

    </div>

    <div class="footer">

        页脚

    </div>

</body>

</html>

CSS实现页脚始终在页面底部的更多相关文章

  1. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  2. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  3. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  4. 005-CSS让页脚始终在底部不论页面内容多少

    让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...

  5. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  6. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  7. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

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

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

  9. css让footer永远保持在页面底部

    案例1:仅仅保存在页面底部.不固定. 思路: html: <div class="body"> <header>我是头部</header> &l ...

  10. 有哪位大侠操作过NPOI生成word文档，如何设置页眉页脚距离顶部和底部距离？

    #region 1.创建文档(页眉.页脚) XWPFDocument doc = new XWPFDocument(); //页面设置 A4:w=11906 h=16838 doc.Document. ...

随机推荐

  1. SQLServer 性能报表的学习与使用

    SQLServer 性能报表的学习与使用 背景 前面连续学习了 SQLServer如何优化等事宜. 但是一开始总是么有找到对应的问题解决思路 周天时想到了 SQLSERVER的MDW工具 但是并没有找 ...

  2. [转帖]Shell 判断文件或文件夹是否存在（不存在则创建）

    目录 1. 文件夹不存在创建文件夹 2. 判断文件夹是否存在 3. 判断文件是否存在 4. 常用的文件比较符 1. 文件夹不存在创建文件夹 if [ ! -d "/data/" ] ...

  3. [转帖]《Linux性能优化实战》笔记（20）—— 使用 tcpdump 和 Wireshark 分析网络流量

    tcpdump 和 Wireshark 是最常用的网络抓包和分析工具,更是分析网络性能必不可少的利器. tcpdump 仅支持命令行格式使用,常用在服务器中抓取和分析网络包.Wireshark 除了可 ...

  4. SQLServer 隔离级别的简单学习

    SQLServer 隔离级别的简单学习 背景 上周北京一个项目出现了卡顿的现象. 周末开发测试加紧制作测试发布了补丁,但是并没有好转. 上周四时跟研发訾总简单沟通过, 怀疑是隔离级别有关系.但是不敢确 ...

  5. [转帖]总结：nginx502：Tomcat调优之acceptCount

    问题背景:UI页面点击会偶尔返回error,检查调用日志,发现nginx报502报错,因此本文即排查502报错原因. 如下红框可知,访问本机个备机的服务502了,用时3秒左右(可见并不是超时) 先给出 ...

  6. 使用 inotifywait的方式监控文件夹发生变化后自动执行脚本的方法

    0. 先安装inotify 最简单的方法为: yum install epel-release 安装扩展包源 yum install inotify-tools 1. 从网上抄了一下脚本 简单记录一下 ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （186）-- 算法导论14.1 3题

    三.用go语言,写出OS-SELECT的非递归版本. 文心一言: 下面是使用Go语言编写的OS-SELECT的非递归版本: func OS_SELECT(T *Node, k int) *Node { ...

  8. .net web发布至阿里云服务器

    1.发 布网站第一步:右键网站主项目,选择 发布网站.如下图 第二步 填写发布网站的相关配置,选择配置文件,新建配置文件 第三步 选择发布的文件存放的位置 第四步,选择Release 再点击下一步,点 ...

  9. windows10卸载小娜

    适用于2004版本往后的 win+x如图 输入如下代码 Get-AppxPackage-allusersMicrosoft.549981C3F5F10|Remove-AppxPackage 运行结束后 ...

  10. ffmpeg修改文件格式

    http://ffmpeg.org/ 官网下载windows版本 进这个文件夹 随便找一个格式的文件我这里以mp4 放在这个文件夹里面 然后状态栏输入cmd 输入下方命令代码 ffmpeg -i 66 ...