代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 60px;
background: #79EDEE;
}
.warp {
height: calc(100vh - 60px);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.left {
width: 20%;
height: 100%;
position: relative;
}
.right {
background-color: #CDFDEA;
width: 100%;
height: 100%;
overflow-y: auto;
}
.left-top {
background-color: #C1ECEA;
height: 80%;
box-sizing: border-box;
overflow-y: auto;
}
.left-bottom {
background-color: #D0F5BE;
height: 20%;
box-sizing: border-box;
overflow-y: auto;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb{
background-color: #9f9f9f;
border-radius: 10px;
}
::-webkit-scrollbar-track{
background-color: #fcfcfc;
border-radius: 10px;
}
.collapse {
height: 30px;
width: 20px;
border: 1px solid lightgray;
display: flex;
align-items: center;
justify-content: center;
background-color: aliceblue;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<div class="header">
<div class="menu-btn">
<button class="collapse" id="collapse" onclick="collapse()">关</button>
<button class="collapse" id="collapse" onclick="extend()">开</div>
</div>
</div>
<div class="warp">
<div class="left" id="left-menu">
<div class="left-top" id="left-top"></div>
<div class="left-bottom" id="left-bottom"></div>
</div>
<div class="right" id="right"></div>
</div>
</div>
</body>
<script type="text/javascript">
let leftTopEl = document.getElementById('left-top')
for (let i = 0; i < 100; i++) {
leftTopEl.innerHTML += `<div>${i}</div>`;
}
let leftBottomEl = document.getElementById('left-bottom')
for (let i = 0; i < 100; i++) {
leftBottomEl.innerHTML += `<div>${i}</div>`;
}
let rightEl = document.getElementById('right')
for (let i = 0; i < 1000; i++) {
rightEl.innerHTML += `<div>${i}</div>`;
}
function collapse() {
document.getElementById('left-menu').style.display = 'none'
}
function extend() {
document.getElementById('left-menu').style.display = 'block'
}
</script>
</html>
效果
