css设置自适应屏幕高度
<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设置自适应屏幕高度的更多相关文章
- css实现自适应屏幕高度；
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- css实现自适应屏幕高度
body,html{ margin:0px; height:100%; }
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 设置iframe高度自适应屏幕高度
写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...
- iframe 设置占屏幕高度 100%
给 iframe 元素设置 fixed 定位,并且设置 100% 的宽和高: iframe { position: fixed; background: #000; border: none; top ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- css实现自适应正方形的多种方法实现
方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw.vh.vmin.vmax.其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width, ...
- DIV+CSS自适应窗口高度
<html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...
随机推荐
- js封装插件
js方式: (function(){ var demo = function(options){ this.options = $.extend({ "x" : "1&q ...
- tiny4412 启动方式
1.iROM(BL0):是指Exynos4412的iROM中固化的启动代码,其作用是初始化系统时钟,设置看门狗,初始化堆和栈,加载8kb的bl1到Exynos4412的一个64kb大小内部sram(I ...
- Java运算符号，对象赋值，别名
生活发生的一切,才会促使着我继续前行,今天继续更新哦,看书中的代码练习. 例子1 引入net.mindview.util.Print.* ,方便打印结果. package com.date0529; ...
- c#启动windows服务问题总结
程序以管理员权限运行的原因 在Vista 和 Windows 7 及更新版本的操作系统,增加了 UAC(用户账户控制) 的安全机制,如果 UAC 被打开,用户即使以管理员权限登录,其应用程序默认情况下 ...
- PAT 1043 输出PATest(20)（代码+思路）
1043 输出PATest(20)(20 分) 给定一个长度不超过10000的.仅由英文字母构成的字符串.请将字符重新调整顺序,按"PATestPATest...."这样的顺序输出 ...
- 事件类型（js）
焦点事件:在页面获得或失去焦点时触发. 与document.hasFocus和document.activeElement属性配合,可以得到用户在页面的行踪. blur:元素失去焦点时触发.这个事件不 ...
- dell E6400笔记本 centos7 安装无线网卡
1.下载 驱动:http://download.csdn.net/detail/nj4506/9752842 2.解压: make make install 3.将wk.ko拷贝到 /lib/mo ...
- Spring Environment（三）生命周期
Spring Environment(三)生命周期 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring Envi ...
- jquery plugin 之 form表单验证插件
基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...
- SQL 将一个表中的所有记录插入到一个临时表中
insert into #tempTable select * from TempTable WHERE + 查询条件