代码
<! 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>
效果