H5页面的高度宽度100%
解决方案1:
设置如下:
html,body{
min-height:100vh;
background-color:#fff;
}
这样高度首先不会写死,而且满足最小高度是满屏
解决方案2:
可以用vh和vw来布局。100vh和100vw就是你设备的高度和宽度。先把外面盒子固定下来,所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白。像你这种盒子比较少的可以用js获取设备的高度和宽度,然后用js设置盒子的高度,加起来等于你设备的高度就可以了。字体大小用rem表示。相对于根字体的大小。这是移动端布局的一些做法。
解决方案3:
html,body {
width:100%;
height:100%;
}
body {
padding: 0;
margin: 0;
}
解决方案4:
*{
padding: 0;
margin: 0;
}
body{
width: 100vw;
height: 100vh;
}
H5页面的高度宽度100%的更多相关文章
- HTML 获取屏幕、浏览器、页面的高度宽度
本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...
- 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width
一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...
- [转] HTML 获取屏幕、浏览器、页面的高度宽度
本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...
- javascript 页面各种高度宽度
http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. 图片 IE中: document.body.clientWidth == ...
- Html_页面的高度宽度等
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像 ...
- 关于Div的宽度与高度的100%设定
http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...
- Div的宽度与高度的100%设定
div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...
- 关于div宽度和高度的100%设定
设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...
- Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩
在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实 ...
随机推荐
- OJ002
register:这个关键字请求编译器尽可能的将变量存在CPU内部寄存器中,而不是通过内存寻址访问,以提高效率.注意是尽可能,不是绝对. 因为,如果定义了很多register变量,可能会超过CPU的寄 ...
- idea maven cannot resolve symbol http报错问题解决
学习SpringMVC的过程中,在idea中使用maven管理依赖.在class中使用 javax.servlet.http.HttpServletRequest的时候,报错:cannot resol ...
- 琐事集 vol 2
vol 2-0 宝宝,你是不是该看书咯? 她正瘫在沙发上看剧 我刚提起看书,她惊恐地看了看我 然后眼白一翻,彻底地瘫平了 宝宝? “宝宝睡着了.” 你下周就要考护师了!很难得,她认真地睁开眼,信誓旦旦 ...
- Java实现单例模式的9种方法
一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. 单例模式只能有一个实例. 2. 单例类必须创建 ...
- Javascript中的this关键字用法详解
在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...
- [Swift]LeetCode53. 最大子序和 | Maximum Subarray
Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...
- [Swift]LeetCode255.验证二叉搜索树的先序序列 $ Verify Preorder Sequence in Binary Search Tree
Given an array of numbers, verify whether it is the correct preorder traversal sequence of a binary ...
- Docker系列教程02-MongoDB默认开启鉴权
说明,我这里使用的是compose的版本的1.17.0格式是3,但是这和compose版本无关,你只需要添加MONGO_INITDB_ROOT_USERNAME和MONGO_INITDB_ROOT_P ...
- [Abp 源码分析]十三、多语言(本地化)处理
0.简介 如果你所开发的需要走向世界的话,那么肯定需要针对每一个用户进行不同的本地化处理,有可能你的客户在日本,需要使用日语作为显示文本,也有可能你的客户在美国,需要使用英语作为显示文本.如果你还是一 ...
- 最近要租房子,用Python看一下房源吧..
前言:最近我的朋友想要租房子,为了装个b,决定运用技术去帮助他. 这个网站是什么我也不知道 反正是一个房子交易网站 http://www.ljia.net/ 设置请求头 headers = {'Ac ...