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' 已满 的解决办法 有可能是磁盘剩余空间不足 导致的
一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数据库文件 给增加个数据文件就好了 解决办 ...
随机推荐
- 【NX二次开发】 获取体的面 UF_MODL_ask_body_faces
获取体的面 1 extern DllExport void ufsta(char *param, int *returnCode, int rlen) 2 { 3 UF_initialize(); 4 ...
- 『动善时』JMeter基础 — 47、JMeter的HTTP代理服务器详细介绍
目录 1.HTTP代理服务器的添加 2.HTTP代理服务器界面详解 (1)State:状态 (2)Global Settings:全局设置 (3)Test Plan Creation:测试计划创建 ( ...
- Python3中列表、字典、元组、集合的看法
文首,我先强调一下我是一个弱鸡码农,这个随笔是在我学习完Python3中的元组.字典.列表,集合这四种常见数据的数据类型的一些感想,如果有什么不对的地方欢迎大家予以指正.谢谢大家啦 回归正题:这篇随笔 ...
- bzoj2427 软件安装！ 树dp
软件安装 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一 些软 ...
- .NET Core/.NET5/.NET6 开源项目汇总4：CMS、Blog项目
系列目录 [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊 ...
- 树莓派FRP内网穿透及自启动
内网穿透的步骤和文件存档 实验室在远方部署了电脑主机来采集数据和图片,每次去调试会很麻烦,因而使用FRP内网穿透使得我们可以在实验室访问主机. 主要功能 实现远程可访问和开机自启FRP程序服务 安装和 ...
- WPF Frame 的 DataContext 不能被 Page 继承
转载至https://blog.csdn.net/sinat_31608641/article/details/88914517 已测试解决方案可行,因为WPF相关资料稀少,防止日后404,特搬运到自 ...
- Spring学习日记02_IOC_属性注入_其他类型属性
ICO操作Bean管理(xml注入其它类型属性) 字面量 null值 <property name="address"> <null></null&g ...
- 配置本地yum源以及挂载镜像
配置本地yum源以及挂载镜像(centos7.6) 配置yum源 # cd /etc/yum.repos.d 可以备份或者删除里面的文件 新建文件 # touch /etc/yum.repos.d/l ...
- ESCMScript（2）Module语法
严格模式 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";. 严格模式的限制如下 变量必须声明后再使用 函数的参数不能有同名属性,否则报错 不能 ...