h5单页面布局

2024年2月21日 121次阅读 来源: Sailing

前段时间做了一个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;
}
    原文作者：Sailing
    原文地址: https://segmentfault.com/a/1190000012749647
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞