弹性盒布局，主轴方向变成column。
移动网络环境可能不稳定，因此需要确保页面加载速度快，可以通过压缩图片、减少HTTP请求等方式来优化性能。
1、模板一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.left{
/* width: 100px; */
height: 100px;
background-color: red;
}
.center{
flex: 1;
/* height: 100%; */
background-color: rgb(12, 217, 40);
overflow: auto;
}
.right{
/* width: 100px; */
height: 100px;
background-color: rgb(4, 106, 231);
}
</style>
</head>
<body>
<div class="left">hLeft</div>
<div class="center">center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.1111111111</div>
<div class="right">right</div>
</body>
</html>
2、模板二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.left{
/* width: 100px; */
height: 100px;
background-color: red;
}
.center{
flex: 1;
/* height: 100%; */
background-color: rgb(12, 217, 40);
overflow: auto;
}
.right{
/* width: 100px; */
height: 100px;
background-color: rgb(4, 106, 231);
}
</style>
</head>
<body>
<div class="left">hLeft</div>
<div class="center">center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.1111111111</div>
<!-- <div class="right">right</div> -->
</body>
</html>
三、模板三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.left{
/* width: 100px; */
height: 100px;
background-color: red;
}
.center{
flex: 1;
/* height: 100%; */
background-color: rgb(12, 217, 40);
overflow: auto;
}
.right{
/* width: 100px; */
height: 100px;
background-color: rgb(4, 106, 231);
}
</style>
</head>
<body>
<!-- <div class="left">hLeft</div> -->
<div class="center">center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.center Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum praesentium quidem a inventore neque temporibus iusto laborum distinctio nam? Autem sequi magnam quis corporis inventore dolore, consectetur laborum commodi ipsum.1111111111</div>
<div class="right">right</div>
</body>
</html>
