我们都知道,只要是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. 深入理解MVC

    首先我们来看看MVC架构的示意图:             和访问者交互的是控制层(Controller层),控制器(controller)是同类交互的集合,每一个交互的操作,都对应了一个动作(act ...

  2. Linux基础网络搭建实验

    一.实验目标 利用3台虚拟机,搭建vmnet2和vmnet3两个host-only网络,实现两个网络的互联 二.实验环境   内网 外网 网关 IP 192.168.0.10/24 202.3.4.1 ...

  3. css grid学习材料整理

    2017-04-18 19:59:02 由浅入深: 什么是网格布局:http://www.w3cplus.com/css3/what-is-css-grid-layout.html 浏览器如何开启网格 ...

  4. javascript 表达式和运算符 (二)

    表达式是一种JS短语,可使JS解释器用来产生一个值. 一.表达式 表达式分类 1.原始表达式 常量.直接量 (3.14,"test"); 关键字 (null,this,true): ...

  5. Android 安卓实现页面相互跳转并相互传递参数

    一.对于两个页面之间相互传值,跳转的时候我们使用 startActivityForResult(intent,0),而不是startActivity(intent) 这个方法 第一个页面中在触发跳转的 ...

  6. Day5 模块及Python常用模块

    模块概述 定义:模块,用一砣代码实现了某类功能的代码集合. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,提供了代码的重用性.在Python中,一个.py文件就称之为一个模块(Mod ...

  7. 使用 onpropertychange 和 oninput 检测 input、textarea输入改变

    检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件. 缺陷:复制粘贴时无法检测 2.onchenge 缺陷:要满足触发条件:当前对象 ...

  8. Visual Studio 2013 IIS Express使用域名调试mvc程序

    1.编辑applicationhost.config文件 启动vs2013,在右下角IIS Express图标中右击,显示如图,点击框中菜单. 找到你的启动项,点击1,然后点击2,这是应该会有编辑器打 ...

  9. Django入门笔记

    Django入门笔记 **文档包含Django安装包.学习的笔记.代码等 安装 Django参考附件,只需要把附件拷贝到你需要的目录就行.Django是1.8.16版本 Python:在附件中,其中有 ...

  10. [刷题]算法竞赛入门经典(第2版) 5-6/UVa1595 - Symmetry

    题意:平面上给若干点,问它们是不是关于某垂直于x轴的直线对称. 代码:(Wrong Answer, –ms) //UVa1595 - Symmetry #include<iostream> ...