仿照google maps两列式布局
来源：互联网 发布：网页js动画特效代码 编辑：程序博客网 时间：2024/05/22 01:31
要求： fiexed header and footer，左侧栏fiexed width， 右边内容自动fill，左侧栏和右边内容栏等高(无论有无内容)。
可以采用绝对定位布局实现：代码如下:
body{
padding: 0;
}
* {
padding:0;
margin:0;
}
#header{
background-color:#ccc;
height: 50px;
width: 100%;
}
#wrapper{
position: absolute;
width: 100%;
top: 50px;
bottom: 50px;
}
#navigation{
background-color:#eee;
position: absolute;
width: 250px;
height: 100%;
overflow:auto;
}
#content{
background-color:#999;
padding-left:250px;
height:100%;
overflow: auto;
}
#footer{
background-color:#111;
position: absolute;
height: 50px;
width: 100%;
bottom:0;
}
HTML文档结构如下：
<body>
<div id="header"> </div>
<div id="wrapper">
<div id="navigation"> </div>
<div id="content"> </div>
</div>
<divid="footer"> </div>
结果如下：
- 仿照google maps两列式布局
- Google Maps
- google maps
- Google Maps API 说明
- baidu & google maps 分析
- Google Maps API
- Google maps切割方法
- Google Maps Hacks
- 学习 Google Maps API
- Powerful Google Maps APIs
- google maps api
- Google Maps 图标
- google maps api 应用
- Google Maps获取经纬度
- Widget與Google Maps
- google maps经纬度距离
- Google Maps API V3
- Google Maps + Flex Mobile
- Web前端性能优化
- Odoo 表单界面标签与栏位空间调整
- Powerdesigner15-物理模型-导出建表sql语句
- hadoop日志分析
- MVC Json 的返回
- 仿照google maps两列式布局
- struts2配置全局result的global-exception-mappings
- 3349
- ubuntu 12.04 安装 nginx+php+mysql web服务器
- boot.s head.s 学习说明
- POJ 2528 Mayor's posters(离散化+线段树成段更新)
- jQuery—实时显示输入框字数
- SqlLite的案例学习-----看代码学习
- Inno Setup详细教程
