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. 修咻咻对追光的人、云打印团队的Beta产品测试报告

    修咻咻对追光的人.云打印团队的Beta产品测试报告 作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Beta冲刺(团队) 团队目标 切实可行的计算机协会维修预约平 ...

  2. maven setting 配置仓库，pom.xml中repository不起作用

    问题描述 最近做java项目,需要使用公司自己搭建的maven仓库,但是有些包公司的仓库中没有,导致下载失败. 项目环境 jdk:1.8 maven:3.5 问题原因分析 maven的setting文 ...

  3. Let's Encrypt之acme.sh

    前言 Let's Encrypt 是一个证书颁发机构(CA).是由互联网安全研究小组(ISRG,Internet Security Research Group)主导并开发的一个新型数字证书认证机构( ...

  4. 趣文：如何通过给MM修电脑培养感情[转]

    在修之前,向 MM 反复声明,这电脑故障是有硬件和软件之分的,如果是硬件故障,例如显卡风扇不转了,显示器连线老化,显示器分辨率超出显示器指标,等等都会导致黑屏啊,这个我不回家用专门的工具是修不好的! ...

  5. Oracle高危安全漏洞：具有查询权限用户可绕开安全限制进行数据修改

    数据库版本 11.2.0.* 检查数据库是否存在此bug的脚本: Oracle用户执行此脚本 #!/bin/bash # Usage: 检查ORACLE数据库是否存在高危安全漏洞(具有查询权限用户可绕 ...

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

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

  7. Logstash之控制台输出的两种方式

    输出json output { stdout { codec => json } } 输出rubydebug output { stdout { codec => rubydebug } ...

  8. 使用linq对ado.net查询出来dataset集合转换成对象（查询出来的数据结构为一对多）

    public async Task<IEnumerable<QuestionAllInfo>> GetAllQuestionByTypeIdAsync(int id) { st ...

  9. windows配置flutter的注意点

    参考官网配置:https://flutter.cn/docs/get-started/install/windows 注意点: 1. 配置好环境变量后,必须重启电脑才有效果(后面还有需要重启的,所以到 ...

  10. Salesforce LWC学习(一)Salesforce DX配置

    LWC: Create a Salesforce DX Project and Lightning Web Component:https://www.youtube.com/watch?v=p268 ...