<!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. 支持向量机-完整Platt-SMO算法加速优化

    完整版SMO算法与简单的SMO算法: 实现alpha的更改和代数运算的优化环节一模一样,唯一的不同就是选择alpha的方式.完整版应用了一些能够提速的方法. 同样使用Jupyter实现,后面不在赘述 ...

  2. SQL Server 常用函数使用方法

    之前就想要把一些 SQL 的常用函数记录下来, 直到今天用到substring()这个函数,C# 里面这个方法起始值是 0,而 SQL 里面起始值是 1.傻傻分不清楚... 这篇博客作为记录 SQL ...

  3. zookeeper 学习 状态机复制的共识算法

    https://www.youtube.com/watch?v=BhosKsE8up8 state machine replication 的 共识(consensus) 算法 根据CAP理论,一个分 ...

  4. [转] JavaScript 之 ArrayBuffer

    JS里的ArrayBuffer 还记得某个晚上在做 canvas 像素级操作,发现存储像素的数据格式并不是Array类型,而是ArrayBuffer,心想这是什么鬼?后来查了一些资料,发现自己这半年来 ...

  5. 总结Flink状态管理和容错机制

    本文来自8月11日在北京举行的 Flink Meetup会议,分享来自于施晓罡,目前在阿里大数据团队部从事Blink方面的研发,现在主要负责Blink状态管理和容错相关技术的研发.   本文主要内容如 ...

  6. 经典的XSS案例

    在做安全审计的时候,通过常用的<script>alert(1)</script>无法发现该XSS

  7. lvs-dr

    第5节  dr模型 在rs上配置 :rip  和vip   vip定义在lo别名上 Director 上配置:vip  和dip 都只需要一块网卡  网卡都桥接 Vip: 192.168.0.105 ...

  8. UOJ#53. 【UR #4】追击圣诞老人 树链剖分 k短路

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ53.html 题意 给定一棵有 n 个节点的树. 每一个点有一个权值. 对于每一个 $i$ 给定三个参数 ...

  9. AtCoder Grand Contest 1~10 做题小记

    原文链接https://www.cnblogs.com/zhouzhendong/p/AtCoder-Grand-Contest-from-1-to-10.html 考虑到博客内容较多,编辑不方便的情 ...

  10. CF552 E. Two Teams

    题意:给出一串n个数   为1-n的乱序 一共有两个教练   教练一的队伍是1队  二是二队 教练一选择 当前队列中剩余人数的最大序号   将其和左边k个人 和右边k个人 变为一队 如此反复直到所有人 ...