想让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. RobotFramework常用断言关键字

    变量或者关键字内容判断关键字 1.内容包含或者不包含:should contain . should not contain 与should contain x times *** Test Case ...

  2. 【渗透实战】那些奇葩的WAF_第二期_无意发现通杀漏洞,空字节突破上传！

    /文章作者:Kali_MG1937 CSDN博客号:ALDYS4 QQ:3496925334 未经许可,禁止转载/ 该博文为本人18年左右的渗透记录,文法粗糙,技术含量极低,流水账文章,且今日不知为何 ...

  3. Effective Fusion Factor in FPN for Tiny Object Detection

    微小目标检测的FPN有效融合因子 摘要:基于FPN的检测器在一般物体检测方面取得了显著的进步,例如MS COCO和PASCAL VOC.然而,这些检测器在某些应用场景中会失败,例如微小物体检测.在本文 ...

  4. 彻底解决Spring mvc中时间类型的转换和序列化问题

    在使用Spring mvc 进行开发时我们经常遇到前端传来的某种格式的时间字符串无法用java8时间包下的具体类型参数来直接接收.同时还有一系列的序列化 .反序列化问题,在返回前端带时间类型的同样会出 ...

  5. 32.qt quick-模仿QQ登录界面实现3D旋转(Rotation、Flipable)

    要想模仿QQ登录界面的3D旋转,我们需要学习Rotation和Flipable.由于没找到QQ的资源图,所以我们以两个图片为例模仿QQ的3D旋转,如下图所示: 最终效果如下所示: 1.Rotation ...

  6. Vue实现点击复制文本内容(原生JS实现)

    需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...

  7. python3.6虚拟环境

    3.1.安装python3.6 [root@slavenode1 ~]# python -V Python 2.7.5 [root@slavenode1 ~]# yum install python3 ...

  8. 混沌工程之ChaosToolkit使用之一删除K8s POD

    今天我们来玩一下混沌工程的开源工具chaostoolkit . 它的目标是提供一个免费,开放,社区驱动的工具集以及api. 官方源码链接:https://github.com/chaostoolkit ...

  9. Linux + .net core 开发升讯威在线客服系统：同时支持 SQL Server 和 MySQL 的实现方法

    前段时间我发表了一系列文章,开始介绍基于 .net core 的在线客服系统开发过程. 有很多朋友一直提出希望能够支持 MySQL 数据库,考虑到已经有朋友在用 SQL Server,我在升级的过程中 ...

  10. linux设备驱动编写入门

    linux设备驱动是什么,我个人的理解是liunx有用户态和内核态,用户空间中是不能直接对设备的外设进行使用而内核态中却可以,这时我们需要在内核空间中将需要的外设驱动起来供用户空间使用.linux的驱 ...