我们都知道,只要是block状态的标签,宽度和父级等宽,或者设置宽度100%也可以等宽,但设置高度100%是不管用的,那么如何让标签和页面等高呢,除了用js去动态计算设置高度值,用css也可以

只要将元素定位,并设置高度100%,宽度100%;它就可以和它的定位父级同宽同高了;如果元素相对于html定位,那么就和页面等高等宽了。

提供以下两种写法:

1、

.wrap{
position:absolute;
top:;
right:;
bottom:;
left:;
background:#CCC;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

2、

.wrap{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
overflow-y: auto;
background:#CCC;
}

完!

css如何让div和页面等高?的更多相关文章

  1. div+css实现的左右两个等高div

    工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两 ...

  2. css笔记:如何让一个div居于页面正中间

    如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...

  3. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  4. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  5. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  6. CSS——制作天天生鲜登陆页面

    这个登陆页面主要是有一个form表单,其他的和首页差不多的. login.html: <!DOCTYPE html> <html lang="en"> &l ...

  7. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  8. Head First HTML与CSS(第2版)PDF高清完整版免费下载|百度云盘

    百度云盘:Head First HTML与CSS(第2版)PDF高清完整版免费下载 提取码:i8q4 内容简介 是不是已经厌倦了那些深奥的HTML书?你可能在抱怨,只有成为专家之后才能读懂那些书.那么 ...

  9. div两栏等高布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. XISE菜刀V21.0 官网版 XISE菜刀VIP破解版 XISE官网

    诠释: 1. 破解VIP登陆限制 2.去后门 (自查) 下载地址 : https://pan.baidu.com/s/1skUqlGD https://pan点baidu点com/s/1skUqlGD ...

  2. PROFINET如何实现实时性

    平时我们都听过文艺作品要“源于生活而高于生活”.PROFINET是基于工业以太网的,用文艺范儿的词汇说就是“源于以太网而高于以太网”.那么,PROFINET是怎么做到“高于以太网”的呢? 要做到比普通 ...

  3. 你想要的都在这里,ASP.NET Core MVC四种枚举绑定方式

    前言 本节我们来讲讲在ASP.NET Core MVC又为我们提供了哪些方便,之前我们探讨过在ASP.NET MVC中下拉框绑定方式,这节我们来再来重点看看枚举绑定的方式,充分实现你所能想到的场景,满 ...

  4. 【内网渗透】MSF的exploit和pyload的基础使用

    1.连接MSF root@kali:~# msfconsole 2.显示所有攻击模块 msf > show exploits |more 3.寻找攻击模块 msf > search ms0 ...

  5. bzoj2144 【国家集训队2011】跳跳棋

    Description 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子.我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他 ...

  6. jQuery修炼心得-DOM节点的插入

    1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...

  7. Vue 项目实战系列 (二)

    上一章节我们已经把项目的初始化工作完成了,接下来我们再来进行具体的代码编写.这一节我们将完成如下的页面. 我们在src/目录下新建一个views文件夹,存放我们的主要页面文件.目录结构如下: cine ...

  8. java线程(三)

    线程代码同步与线程锁 为什么要有同步代码块? 线程同步的出现是为了解决多个线程对统一资源操作而引发的数据混乱问题.这里引用一个经典demo-银行转账操作,场景如下,小明的账户目前有1000人民币,他在 ...

  9. UIView的属性

    .alpha 设置视图的透明度.默认为1. // 完全透明 view.alpha = ; // 不透明 view.alpha = ; .clipsToBounds // 默认是NO,当设置为yes时, ...

  10. poj 1056 IMMEDIATE DECODABILITY 字典树

    题目链接:http://poj.org/problem?id=1056 思路: 字典树的简单应用,就是判断当前所有的单词中有木有一个是另一个的前缀,直接套用模板再在Tire定义中加一个bool类型的变 ...