<!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. Python推荐系统库--Surprise实战

    一.使用movieLens数据集 from surprise import KNNBasic, SVD from surprise import Dataset from surprise impor ...

  2. mybatis + oracle insert clob，出现ORA-01461:仅能绑定要插入LONG列的LONG值

    在网上查了很久,有可能问题是出现在当从dual中取数据时,会将clob对象的字段转为Long型 最后的解决方法用到了Begin和end语法: 1.用到begin 和end 2.用到insert int ...

  3. [转] Shell编程之数组使用

    #!/bin/bash #基本数组操作a=(1 2 3) ##()表示空数组echo "第0个元素:"${a[0]}echo "所有元素: "${a[@]}ec ...

  4. spring security实现动态配置url权限的两种方法

    缘起 标准的RABC, 权限需要支持动态配置,spring security默认是在代码里约定好权限,真实的业务场景通常需要可以支持动态配置角色访问权限,即在运行时去配置url对应的访问角色. 基于s ...

  5. HTML LIST 输入框自动查询追加框,自动过滤 HTML5

    <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp&q ...

  6. 【转】 诡异的ORA-02289: sequence does not exist

    原文地址:http://blog.itpub.net/20801486/viewspace-695651/ 今天被开发人员告知在应用用户下无法查询自己创建的sequence的nextval值.当执行s ...

  7. Unknown lifecycle phase "mvn"

    Unknown lifecycle phase "mvn" maven执行命令错误  : 执行输入命令即可,不需要添加 mvn 此处不需要写mvn,而是执行写compile就行,否 ...

  8. ORA-12154: TNS: 无法解析指定的连接标识符 问题

    ORA-12154: TNS: 无法解析指定的连接标识符 问题:https://zhidao.baidu.com/question/397519550.html

  9. debian9 开启rc.local服务

    由于某些软件并没有增加开启启动的服务,很多时候需要手工添加,一般我们都是推荐添加命令到 /etc/rc.local 文件,但是 Debian 9 默认不带 /etc/rc.local 文件,而 rc. ...

  10. 【JavaScript】快速入门

    摘抄地址快速入门 No1: JavaScript严格区分大小写 No2: JavaScript不区分整数和浮点数,统一用Number表示 NaN表示Not a Number,当无法计算结果时用NaN表 ...