<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. input框和文字对齐问题

    css样式解决! style="vertical-align: text-bottom;margin-bottom: 2px;"一.问题产生的条件对于14像素大小的字体是没有本篇所 ...

  2. 阿里巴巴Java开发手册及Java代码规约扫描eclipse插件

    一.github地址: https://github.com/alibaba/p3c 二..eclipse插件的安装 此处示例采用eclipse,版本为 Neon.1 Release RC3 (4.6 ...

  3. angular2.0学习笔记3.了解angular2.0项目结构

    1.我们应用的代码都位于src文件中,包括所有的组件.模板.样式.图片以及我们的应用所需的任何东西都在这个文件来里. 2.src这个文件夹之外的文件都是为构建应用提供支持用的. src文件夹及用途说明 ...

  4. PAT 1071 小赌怡情（15）（代码）

    1071 小赌怡情(15 分) 常言道"小赌怡情".这是一个很简单的小游戏:首先由计算机给出第一个整数:然后玩家下注赌第二个整数将会比第一个数大还是小:玩家下注 t 个筹码后,计算 ...

  5. OSGI引入Spring DM实现对服务对象的管理

    一.异同 熟悉Spring的应该也都了解它的IOC的功能,那么对于在OSGI开发环境下,在使用IOC功能时有什么不同呢?最重要的一点就是Spring上下文对象,每个Spring-Powered Bun ...

  6. iOS.-.cxx_destruct

    -.cxx_destruct 方法: 该方法是由编译器生成的方法. 1. “ARC actually creates a -.cxx_destruct method to handle freeing ...

  7. 简单使用DESeq2/EdgeR做差异分析

    简单使用DESeq2/EdgeR做差异分析 Posted: 五月 07, 2017  Under: Transcriptomics  By Kai  no Comments DESeq2和EdgeR都 ...

  8. MVC 模式和模型 2

    MVC框架 一个实现 MVC 模式的应用包含模型.视图.控制器 3 个模块: 模型:封装了应用的数据和业务逻辑,负责管理系统业务数据 视图:负责应用的展示 控制器:负责与用户进行交互,接收用户输入.改 ...

  9. maven下的jar项目打包的方法

    1.先对pom项目进行install: RunAs->maven install,如果出现如下错误: Failed to execute goal org.apache.maven.plugin ...

  10. spring学习 十二 AspectJ-based的通知入门 带参数的通知

    第一步:编写通知类 package com.airplan.pojo; import org.aspectj.lang.ProceedingJoinPoint; public class Advice ...