有时候我们会有让内容恰好占一屏，并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意，直接谈如何实现。
我们会第一个想到的可能是，页面内所有块级元素的宽度，高度，边距值(margin,padding)都用百分数呗。
在水平方向，宽度，水平方向的间距值如果为百分数的值，其值是相对于其父元素的宽度来计算的，可以实现水平方向适配不同尺寸的设备。
在垂直方向，高度值如果为百分数，其值是相对于父元素的高度来计算的。但垂直方向的间距值如果为百分数的话，其值是相对与父元素宽度（而非高度）来计算的，呵呵（无奈~~~）。
因此，水平方向我们可以用百分数的方案来做适配。垂直方向需要其他方案。
我们能不能用 CSS3 的 Media Queries 呢？做不到。虽然 Media Queries 支持对设备高度的查询，但我们不可能列举所有设备的高度，为每种不同高度的设备写一套 CSS 吧。如果只需兼容几种高度的设备，可以考虑这个方案。
下面介绍几个解决方案。
用 JS 来实现
原理是，在元素上设置高度用 data-style-height 属性，其值为在父元素高度中占的份数。页面初始化时，JS 会根据该值，父元素的高度，父元素的高度的总份数，给该元素的高度赋值。如
在上面代码中，父元素的高度的总份数为 3，a 的高度占 1 份，b 的高度 占 2 份。假设父元素的高度是 100px， 那么 a 的高度为 (1 / 3 * 100)px，b 的高度为 (2 / 3 * 100)px。
同样的，设置间距用这些属性： data-style-margin-top, data-style-margin-bottom, data-style-padding-top, data-style-padding-bottom。页面初始化时，JS 会根据属性值给元素的对应的间距赋值。
具体实现代码见这里。
基于PHP+MYSQL开发，除了网上书店必备的商品管理、配送支付管理、订单管理、会员分组、会员管理、查询统计和多项商品促销功能，还具有完整的文章、图文、下载、单页、广告发布等网站内容管理功能。系统具有静态HTML生成、UTF-8多语言支持、可视化模版引擎等技术特点，支持多频道调用不同模版和任意设置频道首页，适合建立各种规模的网上书店。系统具有以下主要功能模块： 网站参数设置 - 对网站的一些参数进
用 flex 实现
原理和用 JS 实现基本一致。用 flex 实现只是用 flex-grow 的值大于 0 的 flex 元素在父空间很大时，会自动变大的特性来代替 JS 的计算。
具体的原理是，在元素上设置高度用 data-style-height 属性，其父元素设置样式 display:flex;flex-direction: column;。页面初始化时，JS 会根据该值给该元素设置 flex-grow:属性值。间距用带 data-style-height 属性并且元素内容为空的元素来实现。
具体实现代码见这里。
用图片实现
如果内容不需要交互，可以将整个页面做成一张图片来实现。当然，这样做后期维护会比较坑爹。
HTML:
CSS:
html,body{
height: 100%;
}
.fullpage{
width: 100%;
height: 100%;
}
