<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,

        body {

            margin: 0;

            padding: 0;

            height: 100%;

        }

        .if-top {

            display: block;

            border: none;

            width: 100%;

            height: 120px;

        }

        .if-menu {

            width: 20%;

            height: 100%;

            border: none;

        }

        .if-content {

            width: 78%;

            height: 100%;

            border: none;

        }

        .div-outer {

            height: 100%;

            box-sizing: border-box;

            padding-top: 100px;

        }

        .div-top {

            background-color: burlywood;

            height: 100px;

            margin-top: -100px;

        }

        .div-content {

            background-color: #8ddad3;

            height: 100%;

        }

    </style>

</head>

<body>

    <div class="div-outer">

        <div class="div-top">

            你好

        </div>

        <div class="div-content">

            世界

        </div>

    </div>

    <!--<iframe class="if-top" src="top.html"></iframe>-->

    <!--<iframe class="if-menu" src="menu.html"></iframe>-->

    <!--<iframe class="if-content" src="content.html"></iframe>-->

</body>

</html>

这个方法挺好的

div height 自适应高度 占满剩余高度的方法的更多相关文章

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

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

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

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

  3. 关于Linux服务器磁盘空间占满问题的解决方法

    下面给大家分享一篇关于Linux服务器磁盘占满问题解决方法(/dev/sda3 满了),需要的的朋友参考下吧   下面我们一起来看一篇关于Linux服务器磁盘占满问题解决(/dev/sda3 满了), ...

  4. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  5. 【转】CSS实现div的高度填满剩余空间

    转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用 ...

  6. div 自适应高度 自动填充剩余高度

    方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...

  7. 解决css布局时两个div一个宽度固定另一个占满剩余宽度的问题

    /*左侧div*/ .left-div{width: 220px;height: 100%;position: fixed;background: #FFFFFF;} /*右侧div*/ .right ...

  8. html里面，没有内容，要高度占满页面

    html { height:100%; margin:0; } body{ width: 100%; height: 100%; background-color: rgb(52,175,245); ...

  9. 转载 html div三列布局占满全屏（左右两列定宽或者百分比、中间自动适应，div在父div中居底）

    原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...

随机推荐

  1. Lua中assert( )函数的使用

    当Lua遇到不期望的情况时就会抛出错误,比如:两个非数字进行相加:调用一个非函数的变量:访问表中不存在的值等.你也可以通过调用error函数显示的抛出错误,error的参数是要抛出的错误信息. ass ...

  2. Python(列表操作应用实战)方法二

    # 输入一个数据,删除一个列表中的所有指定元素# 给定的列表数据data = [1,2,3,4,5,6,7,8,9,0,5,4,3,5,"b","a",&quo ...

  3. Python生成PASCAL VOC格式的xml标注文件

    Python生成PASCAL VOC格式的xml标注文件 PASCAL VOC数据集的标注文件是xml格式的.对于py-faster-rcnn,通常以下示例的字段是合适的: <annotatio ...

  4. python---顺序查找，二分查找

    比较熟悉了. 但要注意细节, 二分查找时,普通方法mid处理,递归时,mid处理. # coding = utf-8 def sequential_search(a_list, item): pos ...

  5. 【BZOJ3252】攻略

    题解: 首先贪心的会发现我们每次一定会选当前权值和最大的那个 然后在于怎么维护这个最大值 我们发现每个修改实际上是对沿途所有点的子树的修改 所以用线段树维护就可以了.. 另外注意有重复部分,但一定是包 ...

  6. 【转载】WIN7访问共享:0x80070035 找不到网络路径解决方法

    转载:http://blog.chinaunix.net/uid-12372814-id-3518571.html 昨天刚装WIN7系统,今天早上准备访问服务器安装些软件,结果出现网络错误,提示Win ...

  7. Flink运行在yarn上

    在一个企业中,为了最大化的利用集群资源,一般都会在一个集群中同时运行多种类型的 Workload.因此 Flink 也支持在 Yarn 上面运行: flink on yarn的前提是:hdfs.yar ...

  8. eclipse启动web应用 报错

    错误:The origin server did not find a current representation for the target resource or is not willing ...

  9. axios中文文档

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http  ...

  10. 数仓1.1 分层| ODS& DWD层

    数仓分层 ODS:Operation Data Store原始数据 DWD(数据清洗/DWI) data warehouse detail数据明细详情,去除空值,脏数据,超过极限范围的明细解析具体表 ...