h5单页面布局

时间 2019-11-05

标签 h5 页面布局繁體版

原文原文链接

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

页面兼容 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.cssgit

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