<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. Varnish 入门

    本文将介绍 varnish 的工作流程,安装以及 varnish 的配置三个方面的内容.首先简单的介绍 varnish 以及其工作流程,大概了解其内部原理,然后介绍了 varnish 的安装方法,最后 ...

  2. RDMA的基础概念

    一张图可以简单明确的说明,目前RDMA的几种技术的差别: RDMA是remote Direct memory access的简称,有几个最基本的特点: CPU offload kernel bypas ...

  3. 最大子序列（java版)

    package com.algorithm.test; /** * 最大子序列 * @author LiFen * */ public class LargestSubsequence { publi ...

  4. 关于python的字符编码

    理论特别多,金角大王讲的非常细致和深入浅出. 我来个简短的总结: python2的编码:默认是ascii,可以改变成gbk,utf-8等,但是用什么编码写的,就存储成什么编码.如果搬到linux,默认 ...

  5. VS Installer教程

    本文主要讲解利用VS2010下的Visual Studio Installer打包Zigbee程序(VS2010编写)的过程. 1.打开Zigbee程序,在解决方案中添加“新建项目”-->其他项 ...

  6. 关于出现“对不起，您安装的不是正版应用...”的解决方法

    由于Discuz X版本增加了对插件的版本检测,在安装时,可能会出现:"对不起,您安装的不是正版应用,安装程序无法继续执行"的提示,如下图: 唱唱反调小编在此给大家分享解决方法: ...

  7. libnet 库使用（一）

    该库的相关资料主要从源码包中获得(假设当前路径为源码包路径): ./sample 中有代码示例 ./doc/html    中html文件可以通过浏览器打开,参看函数定义 想要的基本上sample中都 ...

  8. ES开发的一些坑（一）

    一.ES-Hadoop导数据的时候报"Could not write all entries"异常  ES-Hadoop是一个开源的数据导入项目,支持数据从hdfs,hive,sp ...

  9. rabbitmq安装.教程

    https://www.cnblogs.com/ericli-ericli/p/5902270.html (rabbitmq安装)https://www.cnblogs.com/iiwen/p/538 ...

  10. js处理img标签加载图片失败，显示默认图片

    1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: script(type='text/javascript', src="http://aj ...