DIV 始终位于文档底部

  1. 设置body为绝对定位，最小显示高度为：100%，宽度为：100%；
  2. 设置底部显示块为绝对定位，bottom: 0，是body元素的最后一个直接子元素；
  3. 设置底部块元素同级元素的上一个兄弟元素的边距可以包含下底部元素即可；
<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        .slibing-div{

            border: 2px red solid;

            height: 200px;

        }

        .footer{

            border: 2px blue solid;

        }

    </style>

</head>

<body style="min-height: 100%; width: 100%; position: absolute;">

	<div style="margin-bottom: 100px;" class="slibing-div">

		<div style="text-align: center">测试用例</div>

	</div>

	<div style="position: absolute; bottom: 0; width: 100%; height: 100px;" class="footer">

		底部块

	</div>

</body>

</html>

DIV 始终位于文档底部的更多相关文章

  1. ie9始终提示文档预览需要最新版本的Flash Player支持的解决方法：

    下载Flash Player 最新版    百度 搜索 第二步:

  2. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  3. Javascript样例之文档章节滚动全版（DOM）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBMAAAC5CAIAAAD1bOCRAAAMEUlEQVR4nO3d4XEbyREGUGRCZQDGcG

  4. Next.js v4.1.4 文档中文翻译【转载】

    最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...

  5. html 初识 文档结构 常用标签

    HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...

  6. day01 html介绍 文档声明头 head标签 body标签

    day01 html   初识html <!--文档的声明--> <!doctype html>   <html lang="en">    # ...

  7. 如何在使用itext生成pdf文档时给文档添加背景图片

    这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的图片,文字和其他内容可以浮在它的上面.这又 ...

  8. 1CSS与文档

    层叠样式表(Cascading Style Sheet,CSS)的功能十分强大,可以影响一个或一组文档的表现. 为什么结构化对HTML来说很重要:1.非结构化页面使得建立内容索引极为困难.2.缺乏结构 ...

  9. HTML结构文档中那些基础又重要又容易被忽略的事？

    HTML结构文档中那些基础又重要又容易被忽略的事? 大部分的人,总是会做出这样下意识地判断:简单就是不重要,容易就可以直接忽略掉!其实不然,简有精髓,基石必重,岂能略而不顾!HTML结构文档的编写,可 ...

随机推荐

  1. Ext.net SelectionModel RowSelection

    <SelectionModel> <ext:RowSelectionModel ID="RowSelectionModel1308" runat="se ...

  2. 【生活现场】从诗词大会飞花令到elasticsearch原理解析（转）

    add by zhj:  作者是阿里的技术专家,把技术解释的通俗易懂,太牛了.该文转自作者的个人公众号:互联网侦察,里面有很多系列文章, 关于算法,大数据,面试现场三个系列,通过漫画学到知识,太棒了 ...

  3. Mysql序列（八）—— group by排序问题

    在mysql中,group by默认会执行排序: By default, MySQL sorts GROUP BY col1, col2, ... queries as if you also inc ...

  4. .NET设计模式-观察者模式

    Observer(观察者模式) 定义对象间的一种一对多的依赖关系,以便当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动刷新. 说白了就是事件. using System; namespa ...

  5. form.submit()提交后返回数据的处理

    form.submit()发送请求一般是单向的,如果需要取返回的数据,一般会发送ajax请求,但是如果form中有附件呢?(以后有时间给大家分享ajax上传附件的功能),确实需要返回数据来知道该功能是 ...

  6. Linux yum的配置 , python环境管理, nginx搭建简单学习

    Linux yum的配置 , python环境管理, nginx搭建简单学习 一丶配置yum的数据仓库 ### yum 工具, 方便,自行解决软件之间的依赖关系. # 配置yum源仓库 (可以使用,清 ...

  7. linux 搭建swoole

    1安装依赖包yum -y install gcc gcc-c++ autoconf automake yum -y install zlib zlib-devel openssl openssl-de ...

  8. Python渗透测试工具库

    漏洞及渗透练习平台 WebGoat漏洞练习平台: https://github.com/WebGoat/WebGoat webgoat-legacy漏洞练习平台: https://github.com ...

  9. REDELK的安装和使用

    0x00 前言简介 红队的SIEM有两个主要目标: 通过创建一个集中管理中心,收集和丰富来自多个 teamservers的所有相关操作日志,增强了红队人员的可用性和概述.这对于在操作中进行历史搜索以及 ...

  10. 华为企业级AS111-S,比较垃圾的地方

    今天换了一个华为企业级AS111-S 路由器,比较垃圾的地方: 1. 网页管理界面是https,却用一个无效的证书,chrome直接不能访问,IE可以访问,但第一次登陆改密码的时候就出错了. 然后怎么 ...