| 第10天:自适应高度 |
| 时间:2009-6-2 11:47:45 作者: 来源: |
| |
如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个div中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面):
body
这里是#mainbox {
margin: 0px;
width: 580px;
background: #fff;
}包含了#menu,#sidebar和#content
这里是#content{
float: right;
margin: 1px 0px 2px 0px;
padding:0px;
width: 400px;
background: #e0efde;}
这里是主要内容,根据内容自动适应高度 这里是主要内容,根据内容自动适应高度
这里是主要内容,根据内容自动适应高度
这个例子的页面主要代码如下:
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加,#content的高度就会增高,同时#mainbox的高度也会撑开,#footer层就自动下移。这样就实现了高度的自适应。
另外值得注意的是:#menu和#content都是浮动在页面右面"float: right;",#sidebar是浮动在#menu层的左面"float: left;",这是浮动法定位,还可以采用绝对定位来实现这样的效果。
这个方法存在另一个问题,就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色,因为在mozilla等浏览器中#mainbox的背景色失效。)
好了,主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。如果你希望尝试其他布局,推荐看看以下文章:
tips:[onestab 的"p.i.e"专题] 还有更多精彩介绍,推荐去看看。
上一篇:
下一篇:
|
| |
| |
网页模板 网站模板 网站建设 网页设计 网页设计师兼职 自助建站 ...
网站魔坊,网页模板,网站模板,免费网页模板,在线模板设计,免费建站,门户网站搭建,建站,企业网站,奇思网络,奇思,智能建站,自助建站,拖动建站,网站建设,网页设计,在线设计模板
www.wzmof.com/ 47K 2009-5-21
商巢创业 门户创业 商人网络家园 魔坊建站 商业交友
而商巢下的门户,门户又一独立实体与商巢合作,由商巢负责技术的更新以及硬件的支持,门户负责自己领域的市场推广以及相应的售后服务即可。 打破以往门户需要源源不断的技术、硬件投入模式,盈利模式清晰 行业门户以及门户下企业网站由网站魔坊...
mhcy.ncooo.com/ 36K 2009-5-14
奇思网络技术 网站建设 深圳网站建设
中小外贸企业做电子商务,需要从两点技术突围 08-01 企业网站建设 提供网站策划、网站建设、数据库开发至网络营销全套解决方案。能针对客户所处行业,结合营销特征量身订做高质量网站建设方案。 网站推广 怎样使网站的投资得到回报?这需要经验...
www.qsnet.com.cn/ 48K 2009-4-2
深圳艺术网
深圳艺术网,中国艺术网,中国当代艺术网,广东当代艺术网,广东艺术网,南方当代艺术网,深圳美术网,深港美术网,深港艺术网,深港当代艺术网,杜应红,深圳当代艺术创作库,深圳创库,深圳美术,深圳艺术,深圳收藏,深圳艺术收藏,深圳音乐网,深圳舞蹈...
www.szarts.cn/ 119K 2009-6-9
| |
|
|