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' 已满 的解决办法 有可能是磁盘剩余空间不足 导致的
一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数据库文件 给增加个数据文件就好了 解决办 ...
随机推荐
- Qt信号槽机制理解
1. 信号和槽概述 > 信号槽是 Qt 框架引以为豪的机制之一.所谓信号槽,实际就是观察者模式(发布-订阅模式).当某个`事件`发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(s ...
- Pipeline模式与Factory+Provider模式的应用
前言 我正在写FastGithub这个小麻雀项目,里面主要涉及了Pipeline模式和Factory+Provider模式,这两种设计模式,让这个项目在"ip扫描"和"i ...
- 关于spooling的一些理解
spooling做了什么 1.将独占设备(打印机)虚拟化,变成一个逻辑上的共享设备. 怎么理解?虚拟化,通俗来讲,就是让单个资源仿似变成了多个资源. 以打印机为例,没有虚拟化之前,只能有一个进程申请到 ...
- 谷歌：python速成课程笔记
1.从用户那里获取信息 name = "Alex" print("hello" + name) 2.让python成为你的计算器 1 print(4+5) 2 ...
- 惊艳面试官的 Cookie 介绍
Cookie 是什么 Cookie 是用户浏览器保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie 主要用于以下三个方面: 会话状态管理(如用户登录 ...
- 【数论】8.30题解-prime素数密度 洛谷p1835
prime 洛谷p1835 题目描述 给定区间[L, R](L <= R <= 2147483647, R-L <= 1000000),请计算区间中 素数的个数. 输入输出 输入 两 ...
- vscode中html和vue没有自动补全，需要怎么配置
先安装HTML Snippets插件 点击 文件-首选项-设置,然后根据以下操作 然后在setting.json中加入以下代码 然后就有提示了
- NTLM协议与Pass the Hash的爱情
0x01.前言 NTLM使用在Windows NT和Windows 2000 Server或者之后的工作组环境中(Kerberos用在域模式下).在AD域环境中,如果需要认证Windows NT系统, ...
- excel VBA构造正则函数（单参数）
Function zhengze(Rng As Range) Set regx = CreateObject("vbscript.regexp")With regx .Gl ...
- CentOS-配置YUM源加速(阿里云、Nexus3)
备份本地源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 配置CentOS6(aliyun ...