一个左边宽度固定，高度多余屏幕出现滚动条，右边宽度不确定，高度多余出现滚动条，footer部分不管页面内容多少一直固定效果展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>页面整体布局</title> <style> body{ overflow: hidden; } .left { position: absolute; left: 0; top: 0; width: 200px; height: 100%; overflow:auto ; background: #312a68; } .right { position: absolute; right: 0; left: 200px;/* 左侧的宽度 */ top: 0; height: 100%; background: #ccc; } header { height: 100px; background: #333; } .con { /*overflow: auto;*/ height:calc(100% - 200px); padding-bottom: 110px;/* 底部高度 + 底部和内容之间的间距 */ } /* 放置的内容 */ .content { overflow: auto; height:100%; margin: 10px; background: #29cee9; } footer { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; background: #fff; text-align: right; } </style> </head> <body> <div class="left"> <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 </div> <div class="right"> <header></header> <div class="con"> <div class="content"> <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 <br />中间区域内容 </div> </div> <footer>底部的文字</footer> </div> </body> </html>