想让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. 狂神说Linux笔记：Vim和账号、用户组、磁盘管理

    什么是Vim编辑器 Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. 简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但 ...

  2. 「题解」NWRRC2017 Grand Test

    本文将同步发布于: 洛谷博客: csdn: 博客园: 简书. 题目 题目链接:洛谷 P7025.gym101612G. 题意概述 给你一张有 \(n\) 个点 \(m\) 条边的无向图,无重边无自环, ...

  3. 简单的Java面向对象程序

    上一篇随笔Java静态方法和实例方法的区别以及this的用法,老师看了以后说我还是面向过程的编程,不是面向对象的编程,经过修改以后,整了一个面向对象的出来: /** * 3 延续任务2, 定义表示圆形 ...

  4. StackOverflow经典问题：代码中如何去掉烦人的“!=null"判空语句

    问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc();} 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何避 ...

  5. 【模拟7.25】回家（tarjan V-DCC点双连通分量的求法及缩点 求割点）模板题

    作为一道板子题放在第二题令人身心愉悦,不到一个小时码完连对拍都没打. 关于tarjan割点的注意事项: 1.在该板子中我们求的是V-DCC,而不是缩点,V-DCC最少有两个点组成,表示出掉一个块里的任 ...

  6. Flask一分钟Mock一个API

    如果安装了Python,并且安装了Flask: pip install flask 那么就可以在短短一分钟内Mock出来一个API,而且只需要用到一个文件. 彻底告别在线Mock网站无法指定请求方法, ...

  7. theUnforgiven-冲刺第一天

    每天的冲刺博客分为scrum和PM报告两部分 吴邦天 负责项目整体构思以及对任务安排,承担项目具体设计,编码: 唐嘉诚 负责项目前端页面设计,承担整个项目的后端数据库搭建以及编码 周游 项目美化以及细 ...

  8. 自动按需引入组件用不了（Vant）

    按照官网的自动按需引入之后,这样写是报错的,直接在vue页面中这样引用也是报错的. 正确的使用方法是这样的

  9. Vue（12）组件的组织结构和组件注册

    组件的组织 通常一个应用会以一棵嵌套的组件树的形式来组织: 例如,你可能会有页头.侧边栏.内容区等组件,每个组件又包含了其它的像导航链接.博文之类的组件. 为了能在模板中使用,这些组件必须先注册以便 ...

  10. Java基础之（一）——从synchronized优化看Java锁概念

    一.悲观锁和乐观锁概念 悲观锁和乐观锁是一种广义的锁概念,Java中没有哪个Lock实现类就叫PessimisticLock或OptimisticLock,而是在数据并发情况下的两种不同处理策略. 针 ...