首先瞅一下效果图

接着就是思考怎么做，我的想法如下图。

把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果(当然不能超过最顶层)。

适配

上面的方式已经把效果做出来了，接下来就是响应式适配了。

1、Mac OS + Chrome

先考虑一下我自己的系统及显示器，

MacBook Pro 1440 x 900 + 外设 hp 1920 x 1080

也就是说 Chrome 的网页可视区高度大概为： 900(或1080) - 180 = 720px

180 = 60 + 20 + 100

60: MAC 桌面程序坞动态尺寸，60 可能是我常用的尺寸吧，那就先这个

20: MAC 桌面最顶部 icon 放置栏高度

100: Chrome 标签页高度 + 地址栏高度 + 书签栏高度

2、Windows + Chrome

然后我们再看看 Windows + Chrome 的情况，以 1366 x 768 为例，

Chrome 的网页可视区高度大概为 768 - 150 = 618px

150 = 40 + 110

40: Windows 桌面底部程序坞尺寸

110: Chrome 标签页高度 + 地址栏高度 + 书签栏高度

3、总结上面两点

以上两点的高度计算通过截图获得，可能会有些许误差。

所以不管在哪种系统下，浏览器的宽度与分辨率是保持一致的(程序坞在底部的时候，程序坞在左右两边一般情况对宽度没有影响)，高度则根据系统及浏览器的不同各有不同，比方说 Safari 没有书签高度。

不同系统加浏览器占用的最高高度约为 180，最小约为 0(全屏的时候)

4、主流系统分辨率尺寸

然后我们看下当前主流系统及分辨率有哪些

PC & MAC & Chrome

常用

1280 x 800

1366 x 1024 (IPad Pro)

1440 x 900

1680 x 1050

1600 x 900

1920 x 1200

2560 x 1440

更高忽略

2880 x 1620

3200 x 1800

5120 x 2880

PC & Windows & Chrome (或 PC & MAC & Chrome & 外设显示器)

 1280 x 720/1024

  1366 x 768

  1440 × 900

  1600 x 900

  1920 x 1080

Mobile & Android