前端布局:全屏布局

2016/10/31 3086
目录
[隐藏]

这是前端布局的第三篇,讲讲全屏布局,全屏布局也是一种常见的布局,看下面的图样:

全屏布局01

上面是导航、下面是底部,中间是左右布局,中间的布局自带滚动条,想要知道有几种实现方法吗?有两种,下面我们就来看看吧:

定高PX全屏布局

效果图是这样的:

全屏布局02

1、Position
Html代码是这样的:

CSS代码是这样的:

这个布局IE6是不支持的,可以用Hack方案:戳这里
2、Flex

Html的代码是这样的:

CSS代码是这样的:

Flex布局IE11以及以上才支持。

定高百分比全屏布局

效果图是这样的:
全屏布局03
html代码不变,来看只要把原先PX的部分都换成百分比即可。
1、Position

2、Flex

自适应全屏布局

效果图是这样的:
全屏布局04
这个方案就不能用position来实现了,但可以用Flex来实现,Html代码是一样的,来看一下。

自适应全屏布局还可以用Grid方案来做,但Grid兼容性不好,只是个W3C的草案,就不介绍了,这三个布局方法的对比效果如下图:

全屏布局05

分享本文: