<!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. excel vba获取拼音

    Function PinYin2(Hz As String) Dim PinMa As String Dim MyPinMa As Variant Dim Temp As Integer, i As ...

  2. Refs & DOM

    Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方式. 在典型的 React 数据流中, 属性(props)是父组件与子代交互的唯一方式.要修改子组件,你需要 ...

  3. [SDOI2018]原题识别

    题解: ..感觉挺烦得 而且我都没有注意到树随机这件事情.. 就写个30分的莫队.. #include <bits/stdc++.h> using namespace std; #defi ...

  4. JMeter执行压测输出HTML图形化报表（二）

    命令行模式将jtl转成测试图表 注意此方法只使用jmeter3.0以后版本 第一种:在测试过程中将jtl转成测试报告(在jmeter的bin目录下执行) jmeter -n -t baidu_requ ...

  5. Codeforces 986C AND Graph dfs

    原文链接https://www.cnblogs.com/zhouzhendong/p/9161514.html 题目传送门 - Codeforces 986C 题意 给定 $n,m (0\leq n\ ...

  6. Practice| 类型转换| 逻辑运算

    类型转换 class Pratice1{ public static void main(String[] args){ int a = 3; //float f = 4.5;//TypeChange ...

  7. 用yield写协程实现生产者消费者

    思路: yield可以使得函数阻塞,next,和send可以解阻塞,实现数据不竞争的生产者消费者模式 代码: import random #随机数,模拟生产者的制造物 def eat(): #消费者 ...

  8. Maze-hdu4035（DP求概率）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4035 题意: 有n个房间,由n-1条隧道连通起来,实际上就形成了一棵树, 从结点1出发,开始走,在每个结点 ...

  9. 图解安装Debian 9.5全过程

    本文将为你带来安装Debian 9.5 GNU/Linux的教程,安装全过程图文并茂讲解.安装Debian 9.5可以把ISO文件下载下来刻录成DVD安装或者采用虚拟机安装等等方法. 一.下载Debi ...

  10. HierarchicalClustering：编写HierarchicalClustering层次聚类算法—Jason niu

    from numpy import * class cluster_node: def __init__(self,vec,left=None,right=None,distance=0.0,id=N ...