<!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. 51 Nod 1242 斐波那契数列的第N项（矩阵快速幂模板题）

    1242 斐波那契数列的第N项  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 斐波那契数列的定义如下: F(0) = 0 F(1) = 1 F(n) ...

  2. HDU 1247 Hat’s Words（字典树活用）

    Hat's Words Time Limit : 2000 / 1000 MS(Java / Others)    Memory Limit : 65536 / 32768 K(Java / Othe ...

  3. OpenCV-Python入门教程4-颜色空间转换

    一.颜色空间转换 import cv2 import numpy as np img = cv2.imread('lena.jpg') # 转换成灰度图 img_gray = cv2.cvtColor ...

  4. excel 中怎么让两列姓名相同排序（转）

    如图,A列B列不动,C列和D列行值不变,以A列姓名为主让C列姓名和A列相同姓名的对齐(行),D行跟着C行不变. 在E1输入公式=MATCH(C1,A:A,0)然后下拉,接著选中C,D,E列,以E列为标 ...

  5. [转] webpack之前端性能优化（史上最全，不断更新中。。。）

    最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图. 可以看到总下载时间从3800ms缩短到1600ms. 我们在 ...

  6. Django时区的解释

    https://segmentfault.com/q/1010000000405911

  7. 0day漏洞

    0Day的概念最早用于软件和游戏破解,属于非盈利性和非商业化的组织行为,其基本内涵是“即时性”. Warez被许多人误认为是一个最大的软件破解组 织,而实际上,Warez如黑客一样,只是一种行为. 0 ...

  8. Consumer is not subscribed to any topics or assigned any partitions

    版本: scala:2.11.8 spark:2.11 hbase:1.2.0-cdh5.14.0 报错信息: java.lang.IllegalStateException: Consumer is ...

  9. <%= %>、<% %>、<%@ %>和<%# %>的区别

    轉至http://blog.csdn.net/wildfeng04/article/details/7290126 <%=%> 里面放的变量名 <% %> 中间一般放函数或者方 ...

  10. gdb调试若干问题

    1.若干命令速查 file <文件名>:加载被调试的可执行程序文件.因为一般都在被调试程序所在目录下执行GDB,因而文本名不需要带路径.示例:(gdb) file gdb-sample r ...