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. Vue.js+vue-element

    Vue.js+vue-element搭建属于自己的后台管理模板:什么是Vue.js?(一)   Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程 ...

  2. 如何将vscode的终端放到右侧

    这个问题我之前上百度搜了一下,只有百度经验有, 但是百度经验的图片看不清,而且按照百度经验的回答,我找不到它说的用户设置 于是我问了一下同学,很简单. 右击终端那条框,我们可以得到下面这张截图 点击将 ...

  3. Spring AOP环绕异常影响的报错

    最近遇到一个问题,异常是: java.lang.ClassCastException: org.springframework.http.ResponseEntity cannot be cast t ...

  4. Base64和本地以及在线图片互转

    package com.ruoyi.common.utils; import java.io.ByteArrayOutputStream; import java.io.FileInputStream ...

  5. Python学习笔记之从文件中读取数据

    10-1 Python 学习笔记:在文本编辑器中新建一个文件,写几句话来总结一下你至此学到的Python 知识,其中每一行都以“In Python you can”打头.将这个文件命名为learnin ...

  6. python 学习之 基础篇三 流程控制

    前言: 一. python中有严格的格式缩进,因为其在语法中摒弃了“{}”来包含代码块,使用严格的缩进来体现代码层次所以在编写代码的时候项目组要严格的统一器缩进语法,一个tab按键设置为四个空格来缩进 ...

  7. Jupyter Notebook 打开方法

    直接在文件资源管理器的地址栏中输入Jupyter notebook ,即可打开当前目录下的Jupyter.比之前右键打开power shell更方便

  8. C# 实体对象作为参数统一去除空格

    /** * ------------------------------------------------------------------------------ * @Copyright in ...

  9. nginx root与alias

    root和alias都可以定义在location模块中,都是用来指定请求资源的真实路径,但又有区别: 采用如下设置 location /static/ { root /data/w3; } 实际访问h ...

  10. android studio学习---标签页分离，满足查同一个文件的不同部分

    分离一个标签窗口:右键标签页,打开上下文菜单,选择Split Vertically or Split Horizontall改变分离窗口的摆放方式:右键标签页,打开上下文菜单,选择 Change Sp ...