极简风格展示三栏布局
链接:demo1
要点:采用三个固定定位
css代码:
*{ padding:0; margin:0; box-sizing: border-box; } ul,li{ list-style-type:none; } .w1200{ width: 1200px; margin: 0 auto; } .nav{ width: 100%; height: 60px; position: fixed; left: 0; top: 0; overflow: hidden; background: red; } .container{ position: fixed; left: 0; top: 0; bottom:0; width: 100%; margin-top: 60px; overflow-y: scroll; overflow-x: auto; } .container .left{ position: fixed; top: 60px; bottom: 0; width: 200px; overflow-y: scroll; overflow-x: auto; } .container .right{ width: 100%; padding-left: 220px; }
链接:demo2
要点:
1.设置csshtml,body{height:100%}
2.滚动内容区域的父级设置css{height100%;overflow:hidden},
3.滚动区域设置{height: calc(100% - 60px)} (calc兼容ie9及以上浏览器)
参考文档 http://www.css88.com/book/css/values/functional/calc().htm
css代码:
*{ padding:0; margin:0; box-sizing: border-box; } html,body{ height: 100%; } ul,li{ list-style:none; } #app{ overflow: hidden; height: 100%; } .nav{ width: 100%; height: 60px; background: red; position: fixed; left:0; top:0; } .container{ width: 100%; height: 100%; } .container_scoller{ height: calc(100% - 80px); margin-top: 60px; overflow: auto; overflow-x: hidden; } .w1200{ position: relative; width: 1200px; height: 100%; margin: 0 auto; } .left{ position: fixed; top: 80px; bottom: 0; z-index: 2; width: 230px; overflow: scroll; overflow-x: auto; } .right{ width: 100%; padding-left: 240px; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步