<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. Http方式下载文件

    代码: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System ...

  2. 20172306《Java程序设计与数据结构》第八周学习总结

    20172306<Java程序设计>第8周学习总结 教材学习内容总结 第十章最开始自己看的时候,没怎么看懂,等老师讲完之后,又看了一遍,就理解了很多.第十章主要学习了以下几点: 1.对于几 ...

  3. UI设计教程学习分享：APP布局

    一.宫格布局 这种APP信息布局方式也是我们目前最常见的一种方式,也是符合用户习惯和黄金比例的设计方式,最知名的就是锤子手机的界面设计.锤子手机界面设计欣赏知名的APP设计采用的九宫格.六宫格等方式布 ...

  4. websocket activemq

    websocket:应用与服务端保持长连接 不停通信 activemq:偶发通信  心跳机制

  5. Maven 下载安装

    http://www.runoob.com/maven/maven-tutorial.html https://www.yiibai.com/maven/ Maven 提倡使用一个共同的标准目录结构, ...

  6. oracle in 多个字段

    oracle 使用in的时候使用多个字段 这个也是刚需啊. 最近有个需求,在一堆商品里面过滤出一些特定的商品类型.供应商的商品(同时满足). 需要的数量不多,但是可能会变化,所以做了两个配置表. 商品 ...

  7. 查看MySQL语句变量了多少行数据

    explain MySQL语句 列如 explain SELECT * FROM 表名 WHERE id=1;

  8. JSP错误

    1.<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin ...

  9. Cannot read property 'protocol' of undefined的原因和解决办法

    Cannot read property 'protocol' of undefined 原因:axios请求中的错误 1.请求地址写错了 2.没有引入http.js 3.引入http.js的时候,单 ...

  10. 查看mysql数据库中的所有用户

    SELECT DISTINCT CONCAT('User: ''',user,'''@''',host,''';') AS query FROM mysql.user; @前面为用户名,后面对应的‘% ...