想让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. P1024 [NOIP2001 提高组] 一元三次方程求解

    题目描述 有形如:a x^3 + b x^2 + c x + d = 0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d均为实数),并约定该方程存在三个不同实根(根的范围在 -100至 ...

  2. Redis 入门权威指北

    前言 看看业务遇到了什么问题? 我们要从互联网架构的演变之路开始说起Redis的前世今生. 在我们小的时候,网络世界好像就是只有通过大屁股台式机才能进入一样,彼时的手机只是用来打打电话,发发短信,网上 ...

  3. 【逆向&渗透实战】Dump内存中的Dex_我是如何脱壳某公司加固过的Apk并利用其API渗透对方数据库

    /作者:Kali_MG1937 QQ:3496925334 CNBLOG博客号:ALDYS4/ 某天午睡,朦朦胧胧梦到给学校提供建站模板的公司有个注射点 梦醒后,我凭借着零散的记忆日进了对面的数据库, ...

  4. Kubernetes 实战——升级应用（Deployment）

    一.更新运行在 Pod 内的应用程序 1. 修改 Pod 模板 将导致应用程序在一定时间内不可用 2. 修改 Service 的 Pod 选择器 需要同时运行两倍的 Pod 3. 滚动升级 应用程序需 ...

  5. .NET Core/.NET5/.NET6 开源项目汇总1：常用必备组件

    系列目录     [已更新最新开发文章,点击查看详细] 开源项目是众多组织与个人分享的组件或项目,作者付出的心血我们是无法体会的,所以首先大家要心存感激.尊重.请严格遵守每个项目的开源协议后再使用.尊 ...

  6. 【linux】驱动-14-异步通知

    目录 前言 14. 异步通知 14.1 异步通知的一些概念 14.2 Linux 信号 14.3 信号接收 14.4 使用流程 14.4.1 参考流程图 14.4.2 分析&编程步骤 14.4 ...

  7. 【学习】自定义view

    自定义控件其实很简单1/2   Canvas的使用 自定义控件其实很简单1/3   Shader与画布的旋转 自定义控件其实很简单2/3   view的测量 自定义控件其实很简单1/4   FontM ...

  8. ceph-csi源码分析（5）-rbd driver-nodeserver分析（上）

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(5)-rbd driver-nodeserver分析(上) 当c ...

  9. angularjs的一点总结

    一,错误小结 1.出现类似于下面的错误,就是说明 $sessionStorage 这个服务未找到 Error: [$injector:unpr] Unknown provider: $sessionS ...

  10. 创建者模式 -- 单例模式(反射&序列化)

    看的视频:https://www.bilibili.com/video/av43896218/?p=286 实现方式:(构造器私有,提供一个外部可以访问的方法(可以提供实例)) 1.饿汉式:线程安全, ...