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. enum一个最不像class的class

    enum一个最不像class的classjava枚举类型是jdk5出现的.它的出现主要为了解决一些有特殊意义,已经确定的,长度不会改变的集合. //月份描述 public class Month { ...

  2. Leetcode 344：Reverse String 反转字符串（python、java）

    Leetcode 344:Reverse String 反转字符串 公众号:爱写bug Write a function that reverses a string. The input strin ...

  3. pandas的使用（6）离散化和合并

    pandas的使用(6)离散化和合并

  4. Web支持HTTPS的client(HTTP&XML-RPC)

    生成Web自签名的证书(在命令行执行以下命令) keytool -genkey -keysize 2048 -validity 3650 -keyalg RSA -dname "CN=Han ...

  5. MYSQL LIMIT 性能测试

    查询语句 # 普通表 SELECT * FROM test_page LIMIT m,n # 内存表 SELECT * FROM test_page_memory LIMIT m,n 总结 查询位置( ...

  6. HTML--元素居中各种处理方法

    1.水平居中 对于行内元素可以使用: .center-children { text-align: center; } 对于块元素,你可以设置其左右外边距为:auto;同时你还应该设置该元素的宽度,不 ...

  7. iptables 【转载】

    一:前言   防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件的或者软件的防火墙两种.无论是在哪个网络中,防火墙工作的地方一定是在网络的边缘.而我们的任务就是需要去定义到底防 ...

  8. 【模板整合计划】DP动态规划

    [模板整合计划]DP动态规划 一:[背包] 1.[01背包] 采药 \([P1048]\) #include<algorithm> #include<cstdio> int T ...

  9. [转]ASP.NET Core Web API 最佳实践指南

    原文地址: ASP.NET-Core-Web-API-Best-Practices-Guide 转自 介绍# 当我们编写一个项目的时候,我们的主要目标是使它能如期运行,并尽可能地满足所有用户需求. 但 ...

  10. 关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

    项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个“浏览器预请求”不通过. 浏览器为什么会自动发送“预请求”?请看以面连接 https://b ...