H5页面内容较少时如何让页面全屏在手机显示呢

解决方案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;
}

以上介绍了“ (css)H5页面内容较少时如何让页面全屏在手机显示呢?”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4444477.html

时间: 2024-10-13 18:57:30

H5页面内容较少时如何让页面全屏在手机显示呢的相关文章

利用filter过虑用户请求URI显示对应页面内容

目的:只是想验证一下filter对URI的过滤 流程讲解:浏览器请求URI,所有请求都走过虑器,在过滤器中处理符合某种请求的URI然后显示对应的页面内容 有2个JSP页面: index.jsp: <body> This is index page. 111111111111111111111<br> <ul> <li>1111111111</li> <li>2222222222</li> </ul> </

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="周记[学校晚会篇]" /><meta name="description

Linux必会原理之输入网址到看到页面内容原理

用户从浏览器输入网址到页面显示,细分了一下基本上由八大快原理组成,他们是:dns解析原理.TCP三次连接.http请求数据包.数据包的封装.数据包的解封装.集群内部的一个请求.服务器的响应报文.四次断开> dns解析原理:当用户在客户端输入网址后,客户端会先访问本地的hosts文件和dns缓存,我们hosts一般都是做测试使用来配置的.所以设备第一访问这个网址,在本地的hosts和local是没有这个解析的,这个时候会向LDNS(也交本地dns寻求解析),如果lDNS这里有记录,就会反馈给客户端

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预

网页调试技巧:抓取马上跳转的页面POST信息或者页面内容

http://www.qs5.org/Post/625.html 网页调试技巧:抓取马上跳转的页面POST信息或者页面内容 2016/02/02 | 心得分享 | 0 Replies 有时候调试网页或者抓别人网页的POST包的时候. 总会遇到这样的尴尬,我们需要抓取POST提交的信息. 或者获取POST完成页面返回的代码. 但是,目标页却马上就跳转了,导致,还没来得及Esc呢,页面就已经刷新了. 这种情况,起码谷歌浏览器的F12是搞不了了... 比如下面的情况 我把密码放在 被Post页面的源码

C#1(.net和C#的关系、VS与.net的对应关系、VS2012常用的几种应用程序、C#定义一个类的方法、类页面内容的解释、定义Person的类、调用Person类的方法、命名规范、数值类型)

1..net和C#的关系 .net是一个开发平台,C#是应用在.net平台上的一种语言.   2.VS与.net的对应关系  3.VS2012常用的几种应用程序 第一种是Windows窗体应用程序,也即是我们常用的C/S端的应用软件: 第二种是控制台应用程序,主要是用来学习调试C#代码的(老师上课应用的模式): 第三种是空Web应用程序,建立空的网页模式,B/S模式: 第四种是Web 窗体应用程序,建立后会生成一些常用的网页组件和功能,例如JS.image等,也是B/S模式. 4.C#定义一个类

Windows 和 Linux下使用socket下载网页页面内容(可设置接收/发送超时)的代码

主要难点在于设置recv()与send()的超时时间,具体要注意的事项,请看代码注释部分,下面是代码: [cpp] view plaincopyprint? #include <stdio.h> #include <sys/types.h> #include <stdlib.h> #include <string.h> #include <errno.h> #include <string.h> #ifdef _WIN32   ///

使用ajax实现无刷新改变页面内容

如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg.aspx.cs" Inherits="p_tg" %> 2 3 <!DOCTYPE html> 4 5 <html> 6 <head&

PHP curl获取页面内容,不直接输出到页面,CURLOPT_RETURNTRANSFER参数设置

使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的CURLOPT_RETURNTRANSFER选项为1或true. 1.curl获取页面内容, 直接输出例子: <?php $url = 'http://52php.cnblogs.com'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPE