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. Extra：Variable Types

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 在我们使用Cg或者HLSL进行shader编写的过程中,常常涉及到一些变量 ...

  2. 《 .NET并发编程实战》阅读指南 - 第10章

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  3. 2019-11-29-dotnet-通过-WMI-获取指定进程的输入命令行

    原文:2019-11-29-dotnet-通过-WMI-获取指定进程的输入命令行 title author date CreateTime categories dotnet 通过 WMI 获取指定进 ...

  4. 使用CodeFirst创建数据库

    1.新建一个类库项目 2.右键管理Nuget程序包,搜索EntityFramework.然后安装 3.新建一个类,然后引用 using System.Data.Entity; 然后写类初始化方法(ba ...

  5. ListView 根据 文件路径 或 扩展名 显示系统文件图标

    private void 获取文件button1_Click(object sender, EventArgs e)         {            folderBrowserDialog1 ...

  6. Asp.net core 简单介绍

    Asp.net core 是一个开源和跨平台的框架,用于构建如WEB应用,物联网(IoT)应用和移动后端应用等连接到互联网的基于云的现代应用程序.asp.net core 应用可运行.net和.net ...

  7. PIE SDK打开自定义矢量数据

    1. 数据介绍 信息提取和解译的过程中,经常会生成一部分中间临时矢量数据,这些数据在执行完对应操作后就失去了存在的价值,针对这种情况,PIE增加了内存矢量数据集,来协助用户完成对自定义矢量数据的读取和 ...

  8. Tornado笔记

    helloworld Tornado特点一句话简介:Tornado是非阻塞式的Web服务器,速度非常快,每秒可以处理数以千计的链接,因此Tornado是实时Web服务的一个理想框架.Tornado因为 ...

  9. 修改Nginx配置参数解决http状态码：413上传文件大小限制问题

    修改Nginx上传文件大小限制 我们使用ngnix做web server的时候,nginx对上传文件的大小有限制,默认是1M. 当超过大小的时候会报413(too large)错误.这个时候我们要修改 ...

  10. JS--插件： 树Tree 开发与实现

    日常在Web项目开发时,经常会碰到树形架构数据的显示,从数据库中获取数据,并且显示成树形.为了方便,我们可以写一个javascript的一个跨浏览器树控件,后续可以重复使用.本节分享一个自己开发的JS ...