div填满页面剩余空间的方法
想让div填满页面剩余空间，最简易的方式还是靠提前的布局。
这里提供两种方法：
（1）利用 height 样式的%比例设置布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
html,body,#page{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="page">
<div style="height: 20%; background:silver"></div>
<div style="height: 80%; background:gray"></div>
</div>
</body>
</html>
（2）利用 table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
html,body,#page{
height: 100%;
width: 100%;
}
#tdcontent {
height: 100%;
background: silver;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
</style>
</head>
<body>
<table id="page">
<tr>
<td id="tdheader">
<div id="header">header</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">content</div>
</td>
</tr>
</table>
</body>
</html>
（3）利用绝对定位，算出上面元素的height，将top属性设为该值，并设置bottom为0。
div填满页面剩余空间的方法的更多相关文章
- android 填满手机磁盘空间方法
http://blog.csdn.net/fulinwsuafcie/article/details/9700619 很多时候我们需要进行临界测试. 譬如当手机盘空间存满的条件下应用会有何表现等. 之 ...
- 多个DIV让float:left属性，最后一个DIV填满剩余的部分
<DIV style="border:1px solid red; overflow:hidden;zoom:1;"> <DIV style='floa ...
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- 如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar ...
- Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- android填满手机内存的方法
1. 进行临界测试,手机盘空间存满的条件下应用会有何表现:通常手动添加大文件但是还是不够,通过如下 2. 使用adb命令完成:通过如下 adb 命令在 /mnt/sdcard/ 目录下产生一个名为 b ...
- css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
- 安卓ImageView.src设置图片拉伸、填满控件的方法
代码改变世界 安卓ImageView.src设置图片拉伸.填满控件的方法 需要给你的ImageView布局加上Android:adjustViewBounds="true"
- sqlserver 出现 因为文件组 'PRIMARY' 已满 的解决办法 有可能是磁盘剩余空间不足 导致的
一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数据库文件 给增加个数据文件就好了 解决办 ...
随机推荐
- Django（64）频率认证源码分析与自定义频率认证
前言 有时候我们发送手机验证码,会发现1分钟只能发送1次,这是做了频率限制,限制的时间次数,都由开发者自己决定 频率认证源码分析 def check_throttles(self, request): ...
- java面试技巧及层次。
不断的积累,从打算找工作之日起,就要坚持在每天闲暇之余学习其中几道题目,日积月累,等到出去面试时,一切都水到渠成,面试时就自然会游刃有余了. 答题时,先答是什么,再答有什么作用和要注意什么,这里给人的 ...
- Binding(二):控件关联和代码提升
上节我们讲到,使用Binding,我们可以关联后台代码中的属性,在某些情况下,我们可能需要将两个控件关联起来,借助Binding,我们也可以轻松的实现. 关联控件 设想这样一个场景,界面中有个Chec ...
- Kubernetes Pod中容器的Liveness、Readiness和Startup探针
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 探针的作用 在Kubernetes的容器生命周期管理中,有三种探针,首先要知道,这探针是属于容器的,而不是Pod: 存 ...
- Unity 异步加载 进度条
当我们进行游戏开发时,时常会进行场景切换,如果下个场景较大,切换时就会出现卡顿现象,甚至看起来像是"死机",非常影响用户体验,我们这时就可以运用异步加载,在界面上显示加载的进度条以 ...
- 创建Cloudflare CDN
背景说明: XX全球版项目CDN, 原有改之前:主CDN为Akamai,备CDN为Cloudflare. 计划改之后:主CDN为Cloudflare,备CDN为Akamai. 原因:Akamai CD ...
- php反序列化-unserialize3
目录 unserialize3-php反序列化 unserialize3 unserialize3-php反序列化 unserialize3 环境地址:https://adworld.xctf.org ...
- bcprov-jdk15-145.rar
javapdf文件操作,加密包 bcprov-jdk15-145.rar https://files.cnblogs.com/files/blogs/692137/bcprov-jdk15-145.r ...
- 创建Maven项目骨架并使用
1.archetype是什么? archetype 字面意思是 原型.可以理解为archetype相当于一个脚手架/模板,通过这个脚手架/模板我们可以快速的创建出一个项目. 比如下图中的这些就是mav ...
- Linux：阿里云设置安全组开放对应端口过程
手动添加后 保存就可以了.