解决方案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%的更多相关文章

  1. HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  2. 相册 垂直居中; 水平居中. 1)宽度 大于高度, 宽度 100%; 2) 高度 大于 宽度 , 高度100%; getimagesize , list --->line-height , text-align, vertical-align, max-height, max-width

    一: 效果: 1) 黑色 部分是 相框. 2) 图片 要实现 水平居中, 垂直居中 3) 如果 宽度 大于 高度 ,那么 宽度 100% ,如图1 , 高度 自适应 ,同时不能超过黑色相框的 高度 ; ...

  3. [转] HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  4. javascript 页面各种高度宽度

    http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. 图片 IE中: document.body.clientWidth == ...

  5. Html_页面的高度宽度等

    offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像 ...

  6. 关于Div的宽度与高度的100%设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

  7. Div的宽度与高度的100%设定

    div的100%是从其上一级div的宽高继承来的,所以必须设置其上一级div的宽度或高度,否则无效. 举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的 ...

  8. 关于div宽度和高度的100%设定

    设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明白这个100%的宽度(高度)到底有多宽有多高?这个100%是从哪里得到的从哪里继承 ...

  9. Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩

    在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实 ...

随机推荐

  1. 神经网络_线性神经网络 3 (Nerual Network_Linear Nerual Network 3)

    1 LMS 学习规则_解方程组 1.1 LMS学习规则举例 X1=[0 0 1]T,t1=0:X2=[1 0 1]T,t2=0:X3=[0 1 1]T,t3=0:X1=[1 1 1]T,t1=1. 设 ...

  2. tomcat +jenkios

    来源:https://www.cnblogs.com/edward2013/p/5269465.html 1. 安装JDK JDK下载地址:  http://www.oracle.com/techne ...

  3. js杨辉三角控制台输出

    function Yang(line){ var arr=new Array() ;i<=line;i++){ ]==undefined){arr[i-]=[];} ){arr[]=[i]}){ ...

  4. Python开发虚拟环境使用virtualenvwrapper的搭建及pycharm链接步骤

    virtualenv 是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包.创建的环境是独立的,互不干扰,无需sudo ...

  5. [SQL]LeetCode184. 部门工资最高的员工 | Department Highest Salary

    The Employee table holds all employees. Every employee has an Id, a salary, and there is also a colu ...

  6. [Swift]LeetCode399. 除法求值 | Evaluate Division

    Equations are given in the format A / B = k, where A and B are variables represented as strings, and ...

  7. [Swift]LeetCode404. 左叶子之和 | Sum of Left Leaves

    Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two l ...

  8. [Swift]LeetCode621. 任务调度器 | Task Scheduler

    Given a char array representing tasks CPU need to do. It contains capital letters A to Z where diffe ...

  9. [Swift]LeetCode980. 不同路径 III | Unique Paths III

    On a 2-dimensional grid, there are 4 types of squares: 1 represents the starting square.  There is e ...

  10. 【dotNet Core】Swagger下简单的给WebApi分组

    Startup.cs下ConfigureServices代码 这里主要在DocInclusionPredicate控制输出那些api. Startup.cs下Configure代码 给Controll ...