css设置自适应屏幕高度

/*这里将高度设置为100%是这个布局实现自适应高度的关键，只有这里设置了高度，下面div的高度设置才起作用*/
}
.head{
width: 100%;
height: 50px;
background-color: red;
}
.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>

时间： 2024-08-29 00:01:22

css设置自适应屏幕高度的相关文章

css实现自适应屏幕高度

body,html{ margin:0px; height:100%; }

js自适应屏幕高度

//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ var h = document.documentElement.clientHeight-160; $("#i_con").height( h + 38);// iframe id }

【笔记】css 实现宽度自适应屏幕高度自适应宽度

如果说宽高自适应那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应的同时还要变成矩形呢?(高度和宽度相等而高度不能写死) 那就要实现如下的黑科技了 div{ width: 100% height: 0 padding-top: 100% /* padding 设置为100% 的时候会等于其容器的宽度 */ } 根据w3c 标准,当padding值为 100% 时其相等于元素自身的宽度,所以把padding-top 或者 padding-bo

自适应屏幕高度铺满全屏

思路:获取浏览器的高度,和页面的高度做对比如果浏览器的高度大于页面内容的高度,则把浏览器的高度赋值给页面高度如果当前页面高度大于浏览器高度,就使用当前页面自己的高度 window.onresize=function(){//onresize 事件会在窗口或框架被调整大小时发生. var W_height = $(window).height();//获取窗口(浏览器)的宽度低版本的IE会不支持 var S_height = $(".sider").

虚拟机设置自适应屏幕大小

如何使VMware虚拟机的屏幕自适应窗口大小安装VMware tool 首先安装VMware tool,在选项中选取安装之后在虚拟机中会出现光盘映像,点击打开光盘,点击VmwareTools-xxxx.tar.gz压缩包,将vmware-tools-distribute文件夹解压在任意一个目录下解压后,右键点击vmware-tools-distribute文件夹,选择在终端打开再输入sudo ./vmware-install.pl,之后输入密码,运行安装脚本,除了第一个选项输入yes,其

Tui-x 自适应屏幕（转） ----- 6

1.Tui-x 是怎么设置自适应屏幕的 Tui-x 是默认开启自适应的.开发者只需要关注自己设计尺寸就好了,而Tui-x的默认设计分辨率是480*800,如果你是希望设计分辨率是960*640的话,你需要手动设置一下 [cpp] view plaincopy <span style="font-size:14px;"><span style="font-size:14px;">TuiManager::getInstance()->set

css布局-内容自适应屏幕

css页面布局实现,内容部分自适应屏幕,当内容高度小于浏览器窗口高度时,页脚在浏览器窗口底部:当内容高度高于浏览器窗口高度时,页脚自动被撑到窗口底部. css如下: <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } .main { overflow: hidden; position: r

CSS 使用calc()获取当前可视屏幕高度

来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. em 它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位.一般浏览器字体大小默认为16px,则2em == 32px:ex 依赖于英文字母小 x 的高度ch 数字 0 的宽度rem 根元素(html)的 font-sizevw

CSS设置div的最小高度和最小宽度

CSS设置div的最小高度和最小宽度:所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍.如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如下: