想让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填满页面剩余空间的方法的更多相关文章

  1. android 填满手机磁盘空间方法

    http://blog.csdn.net/fulinwsuafcie/article/details/9700619 很多时候我们需要进行临界测试. 譬如当手机盘空间存满的条件下应用会有何表现等. 之 ...

  2. 多个DIV让float:left属性，最后一个DIV填满剩余的部分

    <DIV style="border:1px solid red; overflow:hidden;zoom:1;">      <DIV style='floa ...

  3. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  4. 如何将div高度填满剩余高度

    下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">     <div id="navbar ...

  5. Header 与 Footer 的 DIV 高度固定， 中间内容 DIV高度自适应，内容不满一页时，默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  6. android填满手机内存的方法

    1. 进行临界测试,手机盘空间存满的条件下应用会有何表现:通常手动添加大文件但是还是不够,通过如下 2. 使用adb命令完成:通过如下 adb 命令在 /mnt/sdcard/ 目录下产生一个名为 b ...

  7. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  8. 安卓ImageView.src设置图片拉伸、填满控件的方法

    代码改变世界 安卓ImageView.src设置图片拉伸.填满控件的方法 需要给你的ImageView布局加上Android:adjustViewBounds="true"

  9. sqlserver 出现 因为文件组 'PRIMARY' 已满 的解决办法 有可能是磁盘剩余空间不足 导致的

    一般虚拟主机提供商是通过限制数据库文件的大小来实现提供定制的数据库空间的.当你把从虚拟数据库空间备份下来的文件恢复到自己的服务器上时,这个限制还是存在的.找到数据库文件 给增加个数据文件就好了 解决办 ...

随机推荐

  1. springmvc——mvc:annotation-driven标签的作用

  2. CentOS：操作系统级监控及常用计数器解析---除CPU以外

    I/O I/O 其实是挺复杂的一个逻辑,但我们今天只说在做性能分析的时候,应该如何定位问题. 对性能优化比较有经验的人(或者说见过世面比较多的人)都会知道,当一个系统调到非常精致的程度时,基本上会卡在 ...

  3. 十三、给已安装的nginx动态添加模块

    给已安装的nginx动态添加模块说明:已经安装好的nginx,需要添加一个未被编译安装的模块,需要怎么弄呢?具体:这里以安装 --with-http_ssl_module模块为例nginx的模块是需要 ...

  4. 内核、dns、网卡配置

    升级内核(安装新版软件包) rpm -ivh kernel-3.10.0-123.1.2.el7.x86_64.rpm 二.配置永久IP地址,子网掩码,网关地址   /etc/sysconfig/ne ...

  5. 【NX二次开发】获取指定矩阵标识的矩阵值

    函数:UF_CSYS_ask_matrix_values () 函数说明:获取指定矩阵标识的矩阵值. 用法: #include <uf.h> #include <uf_csys.h& ...

  6. 《吃透MQ系列》之扒开Kafka的神秘面纱

    大家好,这是<吃透 MQ 系列>的第二弹,有些珊珊来迟,后台被好几个读者催更了,实属抱歉! 这篇文章拖更了好几周,起初的想法是:围绕每一个具体的消息中间件,不仅要写透,而且要控制好篇幅,写 ...

  7. Windows操作系统添加永久静态路由

    1.比如:添加一条去往 10.10.10.0/24网段的静态路由,指定去往此网段的路由都走 172.20.153.254网关 route -p add 10.10.10.0 mask 255.255. ...

  8. Java知识复习（四）

    最近准备跳槽,又要好好复习基本知识了.过了个年,前面刚接触的springboot也只能先放放了.就先把自己复习了哪些罗列出来吧. Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用== ...

  9. N沟通场效应管深度图解(1)工作原理及Multisim实例仿真

    场效应晶体管(Field Effect Transistor, FET)简称场效应管,是一种由多数载流子参与导电的半导体器件,也称为单极型晶体管,它主要分型场效应管(Junction FET, JFE ...

  10. Qt5实现文本编辑器（附图片转PDF与详细代码）

    1. 功能介绍 老规矩,我们直接上截图 这是主界面 文件菜单界面 编辑菜单界面 设置菜单界面 关于菜单界面 2. 功能演示 设置字体颜色 设置字体大小 点击关于菜单 点击关于Qt菜单 会自动跳转到Qt ...