h5单页面布局

最新推荐文章于 2024-05-30 22:10:04 发布

weixin_33936401

最新推荐文章于 2024-05-30 22:10:04 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000012749647

版权

前段时间做了一个PC端单页面应用 GitHub
因为项目开始的比较仓促，加上本人前端经验特别少，虽然项目大体完成了，但是页面布局确成立它的硬伤...为了填补心里落差，专门做了一个h5的单页面布局，代码很简单，大牛请绕过。

演示：Demo-Oline

页面兼容 IE11/Chrome/FireFox(IE10以下未测试)
随浏览器大小自动缩放，不会出现可恶的滚动条

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5-page-layout</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
  
  <header>header</header>
  
  <section>
    <div class="left-menu">left-menu</div>
    <div class="right-content">right-content</div>
  </section>
  
  <footer>footer</footer>
  
</body>
</html>

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;
}