DIV 始终位于文档底部
DIV 始终位于文档底部
- 设置
body
为绝对定位,最小显示高度为:100%
,宽度为:100%
; - 设置
底部显示块
为绝对定位,bottom: 0
,是body
元素的最后一个直接子元素; - 设置
底部块元素同级元素
的上一个兄弟元素
的边距
可以包含下底部元素即可;
<!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 始终位于文档底部的更多相关文章
- ie9始终提示文档预览需要最新版本的Flash Player支持的解决方法:
下载Flash Player 最新版 百度 搜索 第二步:
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- Javascript样例之文档章节滚动全版(DOM)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABBMAAAC5CAIAAAD1bOCRAAAMEUlEQVR4nO3d4XEbyREGUGRCZQDGcG
- Next.js v4.1.4 文档中文翻译【转载】
最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...
- html 初识 文档结构 常用标签
HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...
- day01 html介绍 文档声明头 head标签 body标签
day01 html 初识html <!--文档的声明--> <!doctype html> <html lang="en"> # ...
- 如何在使用itext生成pdf文档时给文档添加背景图片
这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的图片,文字和其他内容可以浮在它的上面.这又 ...
- 1CSS与文档
层叠样式表(Cascading Style Sheet,CSS)的功能十分强大,可以影响一个或一组文档的表现. 为什么结构化对HTML来说很重要:1.非结构化页面使得建立内容索引极为困难.2.缺乏结构 ...
- HTML结构文档中那些基础又重要又容易被忽略的事?
HTML结构文档中那些基础又重要又容易被忽略的事? 大部分的人,总是会做出这样下意识地判断:简单就是不重要,容易就可以直接忽略掉!其实不然,简有精髓,基石必重,岂能略而不顾!HTML结构文档的编写,可 ...
随机推荐
- ES6高级技巧(四)
238 数字->二进制->补码->十进制 const bitwise = N => { if (N < 2) { return N == 0 ? 1 : 0 } /*转化 ...
- Guarded Suspension设计模式
Guarded Suspension 设计模式可以保证,当线程在访问某个对象时,发现条件不满足,就挂起等待条件满足时再次访问 public class GuardedSuspensionQueue { ...
- sql server生成随机id
SQL Server中生成随机ID的函数是newId(),但是这样生成出来的随机ID是36位带[-]符号的. select newId(); -- 746516E0-95D6-4BAF-8826-6C ...
- docker系列之二:构建docker容器
1.创建在FlaskApp/app中创建Flask项目: 2.生成web项目所需的运行环境:pip3 freeze > ../requirements.txt 3.编辑Dockerfile: # ...
- 03 .NET CORE 2.2 使用OCELOT -- Docker中的Consul
部署consul-docker镜像 先搜索consul的docker镜像 docker search consul 然后选择了第一个,也就是官方镜像 下载镜像 docker pull consul 然 ...
- vue v-for 使用问题整理
今天使用v-for指令的时候遇到一个错误 [Vue warn]: Error in render: "TypeError: Cannot read property 'children' o ...
- Layer.js弹层的一些简单的使用
//-----------这里只是简单的做一下记录,没有封装,作为笔记防止忘记了 //----contentMsg 里面是可以传入 HTML代码的 top.layer.alert(contentMsg ...
- Java自学-I/O 关闭流的方式
关闭流的方式 所有的流,无论是输入流还是输出流,使用完毕之后,都应该关闭. 如果不关闭,会产生对资源占用的浪费. 当量比较大的时候,会影响到业务的正常开展. 步骤 1 : 在try中关闭 在try的作 ...
- Linux组管理(6)
在linux中每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 文件/目录的所有者:一般为文件的创建者,谁创建了该文件,就自然成为该文件的所有者 查看文件 ...
- selenium控制超链接在当前标签页中打开或重新打开一个标签页
selenium控制超链接在当前标签页中打开或重新打开一个标签页 在web页面源码中,控制超链接的打开是在当前标签页还是重新打开一个标签页,是由属性target=“_black”进行控制的.如果还有属 ...