前段时间做了一个PC端单页面应用
因为项目开始的比较仓促,加上本人前端经验特别少,虽然项目大体完成了,但是页面布局确成立它的硬伤...为了填补心里落差,专门做了一个h5的单页面布局
,代码很简单,大牛请绕过。 演示:
页面兼容 IE11/Chrome/FireFox(IE10以下未测试) 随浏览器大小自动缩放,不会出现可恶的滚动条
index.html
h5-page-layout header right-content
layout.css
@charset "utf-8";html, body { margin: 0px; padding: 0px; height: 100%; color: white;}header { height: 10%; border-bottom: 1px solid gray; box-sizing: border-box; background: #409EFF;}section { height: 70%; box-sizing: border-box;}.left-menu { width: 10%; height: 100%; background: #67C23A; border-right: 1px solid gray; box-sizing: border-box; float: left;}.right-content { width: 90%; height: 100%; float: left; background: #E6A23C;}footer { height: 20%; border-top: 1px solid gray; box-sizing: border-box; background: #F56C6C;}