第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
 
商巢...
商巢是一个真实的商业交友社区、为用户提供交友、贸易、社区、建站等服务;临渊慕鱼,不如退而结网!商巢结网行动
www.ncooo.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
 
网页设计也通过人脉赚钱-技术传播
 
网页设计114 -打造中国网页设计、网站建设技术信息学习、交流、互动平台
                         打造网页设计师兼职创业平台中心