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' 已满 的解决办法 有可能是磁盘剩余空间不足 导致的
一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数据库文件 给增加个数据文件就好了 解决办 ...
随机推荐
- phpstorm 无法格式化代码
phpstorm 默认的格式化代码的快捷键是 Ctrl + Alt + L,但是按了没有反应. 原因是当时开着网易云音乐,占用了这个快捷键,关了就好了.另外其他的程序比如QQ也有可能占用这个快捷键.
- Android插件化框架研究-DroidPlugin
直接贴上我做的ppt.
- 用纯JS做俄罗斯方块 - 简要思路介绍（1）
大家都知道俄罗斯方块是一款大众化的游戏了,我很小的时候就玩过,今年已经25岁了,可以说俄罗斯方块确实是历史悠久,做俄罗斯方块是我上个星期开始的想法.也许是由于自己从来没有写过这种东西吧,所以有生疏.代 ...
- java利用Scanner获取键盘输入
首发地址:我的网易博客 在运行一个java程序的时候,可能我们需要在运行的时候传递一些参数进去...咋办呢... java提供了一个Scanner类,利用这个类,我们可以很方便的获取键盘输入的参数.. ...
- Oracle 存储过程的创建，及触发器调用存储过程
一.创建存储过程 1.存储过程写法 create or replace procedure HVM_BYQ_TJ --变压器统计信息--->入库 (id in number) as begin ...
- Java 源码学习线路————_先JDK工具包集合_再core包，也就是String、StringBuffer等_Java IO类库
http://www.iteye.com/topic/1113732 原则网址 Java源码初接触 如果你进行过一年左右的开发,喜欢用eclipse的debug功能.好了,你现在就有阅读源码的技术基础 ...
- 禁用谷歌字体解决WordPress访问速度过慢问题
这几天打开网站的时候发现突然变慢了,一直等待加载fonts.googleapis.com,搜索了一下发现很多wordpress网站都出现了 这种现象,原来是因为今日谷歌全线退出中国,貌似谷歌.Gmai ...
- 初窥GPFS文件系统
作者:姜江 linuxemacs@gmail.com 原文地址:http://blog.csdn.net/jznsmail/article/details/5502840?reload 本作品采用知识 ...
- oracle 数据库备份expdp、impdp
跳转查看:https://blog.csdn.net/qq_26230421/article/details/79382013 或 https://www.cnblogs.com/promise-x/ ...
- C51单片机_day_01（定时器和中断系统）
c51单片机 51单片机是控制电路系统的开关,当然芯片就是51芯片,现在随着科技的发展,也是出了很多,功能更多,更全的芯片. 51是用c语言做为程序编程的语言 ——我对基本基础 ...