1.网页头部写viewpoint
2.两种布局去兼容移动端
上中（侧边导航栏(导航过多可以滚动)+内容（可以滚动））下排布
给内容部分限制最小宽度（min-width:）
计算中间部分宽高（calc（100% - 100px））
侧边导航栏position:fixed;
侧边导航了中再包裹一个盒子box，盒子宽高等于侧边导航了，再给box一个overflow-y:scroll,
内容部分给左边一个padding=导航栏宽度
给内容部分一个overflow-y:scroll，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>适应手机</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
.con-head {
position: fixed;
width: 100%;
background-color: rgb(23, 89, 211);
height: 50px;
}
.con-content {
min-width: 1024px;
display: flex;
height: calc(100% - 100px);
background-color: teal;
}
.con-con-aside {
position: fixed;
top: 50px;
width: 200px;
height: calc(100% - 100px);
background-color: tomato;
z-index: 1;
}
.menu {
height: 100%;
overflow-y: scroll;
}
.item {
height: 100px;
}
.con-con-content {
width: 100%;
position: fixed;
top: 50px;
flex: 1;
background-color: wheat;
padding-left: 200px;
height: calc(100% - 100px);
overflow-y: scroll;
}
.con-footer {
width: 100%;
position: fixed;
bottom: 0;
height: 50px;
background-color: thistle;
}
.kong {
/* width: 500px; */
/* position: fixed;
bottom: 0; */
}
</style>
</head>
<body>
<div class="container">
<div class="con-head">
头部
</div>
<div class="con-content">
<div class="con-con-aside">
<div class="menu">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
</ul>
</div>
</div>
<div class="con-con-content">
内容
<div style="display: flex;">
<div class="kong">1</div>
<div class="kong">
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
<li class="item">10</li>
</ul>
</div>
</div>
</div>
</div>
<div class="con-footer">
底部
</div>
</div>
</body>
</html>