<style type="text/css">
body,html{
　　margin:0;
　　height:100%;

/*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
}
.head{
　　width: 100%;
　　height: 50px;
　　background-color: red;
}

#middle{
　　height: 100%;
}

.f1{
　　float: left;
　　width: 50px;
　　height: 100%;
　　background-color: green;
}
.f2{
　　float: left;
　　height: 100%;
　　width: 100px;
　　background-color: blue;
}
</style>

<body>
<div class="head"></div>
<div id="middle">
<div class="f1"></div>
<div class="f2"></div>
</div>
</body>

css设置自适应屏幕高度的更多相关文章

  1. css实现自适应屏幕高度；

    css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  2. css实现自适应屏幕高度

    body,html{ margin:0px; height:100%; }

  3. js自适应屏幕高度

    //自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...

  4. 【笔记】css 实现宽度自适应屏幕 高度自适应宽度

    如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...

  5. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...

  6. iframe 设置占屏幕高度 100%

    给 iframe 元素设置 fixed 定位,并且设置 100% 的宽和高: iframe { position: fixed; background: #000; border: none; top ...

  7. div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形

    摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...

  8. css实现自适应正方形的多种方法实现

    方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...

  9. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...

随机推荐

  1. C语言 内存

    内存属性: 1.大小 2.位置 int a;  默认方式  (段) 内核空间        应用程序不许访问 ------------------------------------------3g ...

  2. 9.29 h5日记

    1.CSS中哪些属性可以继承? font系列 text系列 color line-height 2.border-radius的值 值的顺序是左上 右上 右下 左下 则 border-radius:5 ...

  3. C++中string类

    https://blog.csdn.net/sinat_36184075/article/details/54836053 https://blog.csdn.net/fdqw_sph/article ...

  4. ActiveMq unsupported major.minor version 52.0

    网上是说ActiveMq已经编译好的版本和运行的java版本不一致导致的,看了一下MF文件 用的Jdk版本是1.8,而我们当前系统的java版本是1.7,所以尝试重新下载之前的ActiveMq的版本. ...

  5. 单细胞RNA测序技术之入门指南

    单细胞RNA测序技术之入门指南 [字体: 大 中 小 ] 时间:2018年09月12日 来源:生物通   编辑推荐: 在这个飞速发展的测序时代,DNA和RNA测序已经逐渐成为“实验室中的家常菜”.若要 ...

  6. 简单的node 服务端 响应get,返回json数据;

    原文:http://blog.csdn.net/xn_28/article/details/50837019 const http = require('http'); const hostname ...

  7. 20岁的设计师vs30岁的设计师

    20岁的设计师vs30岁的设计师 如果你还是20来岁,要恭喜你,你还年轻, 一切才刚刚开始 还有时间去探索无尽的可能 还有时间去找到无限的前途 ​ 如果30岁的你还不够强大, 请记得时刻给予自己信心, ...

  8. 超强干货，11个灰常实用的AI设计小技巧！

    11个超级实用的AI设计小技巧!涉及到很多的实用操作,纯干货经验总结,灰常值得收藏,赶快转走学起来吧! ​编辑:千锋UI设计

  9. [SoapUI] 判断工程下某个文件是否存在，存在就删除

    def excelName = "AllTests-Fails" String projectPath = context.expand( '${projectDir}' ) St ...

  10. TI and RI

    https://blog.csdn.net/qq_27977257/article/details/70677661 51单片机的串口,是个全双工的串口,发送数据的同时,还可以接收数据.当串行发送完毕 ...