<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. 【转】Javascript中使用WScript.Shell对象执行.bat文件和cmd命令

    WScript.Shell(Windows Script Host Runtime Library)是一个对象,对应的文件是C:/WINDOWS/system32/wshom.ocx,Wscript. ...

  2. css让内层div自动撑开外层div

    .clear{clear:both;height:0px;font-size: 1px;line-height: 0px;} <div class="audi_items"& ...

  3. Jmeter常用脚本开发之JDBC请求

    简单说明:JDBC请求就是使用Jmeter连接数据库,执行sql语句,并返回对应的响应结果 步骤: 1.引入使用的数据库的驱动jar包,使用不同的数据库,我们需要引入不同的jar包.本文使用的MySQ ...

  4. (转)关于X64位系统IIS7下支持32位asp.net程序

    最近在windows2008 x64位系统下的IIS7下部署asp.net程序. vs2005或vs2008默认的情况下是Any cpu 的也就是支持x86和x64两种系统的.可我的程序在引用了一个三 ...

  5. Numpy array 合并

    1.np.vstack() :垂直合并 >>> import numpy as np >>> A = np.array([1,1,1]) >>> ...

  6. Luogu 2059 [JLOI2013]卡牌游戏 - 概率DP

    Solution 设状态 $F[i][j] $为 还剩余 $i$ 个人时, 第 $j$ 个人 的胜率. 边界: $F[1][1] = 1$(只剩下一个人了). 这样设置状态就能使 $i-1$ 个人的答 ...

  7. rsync （转载）

    rsync 编辑   rsync是类unix系统下的数据镜像备份工具——remote sync. 目录 1简介 2特性 3操作流程 ▪ 服务器端启动 ▪ 客户端同步 4安装     1简介编辑 rsy ...

  8. Go环境下，编译运行etcd与goreman集群管理（1）

    Go环境下编译运行etcd与goreman管理 近几年了Go在比特币.区块链.云服务等相关重要领域贡献突出,作为IT行业的传承“活到老.学到光头”,保持学习心态. 周末放假,补充一二 主题:在Go环境 ...

  9. idea下使用lombok

    转载 https://blog.csdn.net/u013177446/article/details/53943365 (1)pom引入依赖 <dependency> <group ...

  10. 在myeclipse上发布自己的webservice

       什么是WebServices? 它是一种构建应用程序的普遍模型,可以在任何支持网络通信的操作系统中实施运行;它是一种新的web应用程序分支,是自包含.自描述.模块化的应用,可以发布.定位.通过w ...