overflow布局
2017-08-10 19:29
141 查看
在写后台时,常见的布局形式:侧边栏+header+footer+主内容区。主内容区可以自适应高度,有滚动条。(body不溢出)
html:
<div class="ui inverted segment" id="header"> <button class="ui inverted blue basic button" id="indexBtn">首页</button> <button class="ui right floated inverted blue basic button" id="logoutBtn">登出</button> </div> <div class="leftContainer"> <ul class="list"> <li>玩家管理 <ul class="childList"> <!-- 请求的是 链接,不是 路径!!! (只要 该 链接 和 路由中的 链接 保持一致,就ok!!!)--> <li><a href="/slguser/list">玩家管理</a></li> <li><a href="/alliance/list">联盟管理</a></li> <li><a href="/slgreward/user">玩家召回</a></li> </ul> </li> <li>游戏管理 <ul class="childList"> <li><a href="/slgnotice/list">公告管理</a></li> <li><a href="/slgmail/mail">邮件管理</a></li> <li><a href="/slgorder/order">订单管理</a></li> <li><a href="/slgfeedback/List">客服反馈</a></li> <li><a href="/slggift/list">礼包管理</a></li> </ul> </li> </ul> </div> <div class="mainContainer"> <!--根据不同的URL,动态的加载不同的模版--> <%- body %> </div> <div class="footer"> <p>© 2014</p> </div>
css:
body { color: white; background-color: #555555; overflow: hidden; } /* header begin */ #header { padding: .5em 1em; z-index: 2; border-bottom: 1px solid #ffffff; background-color: #1b1c1d; } /* header end */ /* leftContainer begin */ .leftContainer { position: absolute; top: 0; z-index: 1; background-color: #1b1c1d; width: 200px; height: 100%; border-right: 1px solid #ffffff; /*min-height: 300px;*/ } .list { margin-top: 80px; } .list, .childList { m bb1b argin-left: 10px; font-size: medium; } .list > li { color: white; margin-top: 15px; } .childList { margin: 10px 15px; } li { margin-top: 6px; } /* leftContainer end */ /*设置 主内容区滚动,侧边栏不滚动*/ .mainContainer { margin-top: -20px; margin-left: 230px; padding-bottom: 220px; height:100%; overflow-y: auto; } **###其中,最重要的就是:在主内容区设置, height:100%; overflow-y: auto;####** /* footer begin */ .footer { z-index: 2; position: absolute; bottom: 0; width: 100%; height: 30px; text-align: center; color: white; background-color: #0f0f10; border-top: 1px solid #ffffff; padding-top: 5px; } /* footer end */
相关文章推荐
- Talk HTML CSS with new hand
- Talk HTML CSS with new hand
- Android布局的小窍门?
- 如何在页面html中实现复制或剪切文本到剪贴板功能,纯js实现
- Web布局连载——两栏固定布局(五)
- 在centOs 上搭建nginx来部署静态页面网站
- 关于Element中的clientWidth,scrollWidth,offsetWidth等属性详解
- 开发中一些常用的css小技巧
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- PowerShell 发送美观的Vsphere DataStore警报
- 设计模式---状态模式在web前端中的应用
- SUI踩坑记录
- 如何维护老旧代码
- 对web数据可视化的一些理解
- nodejs和树莓派开发以及点亮RGB的LED灯代码
- 前端代码性能质量监测
- eslint webpack2 vue-loader配置