快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

W3C入门第10天:自适应高度

假如我们想在3列布局的最后加一行页脚,放版权之类的信息。就碰到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方式,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模仿一个页面):

Body
这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
这里是#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的背景色失效。)

好了,主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦。假如你希望尝试其他布局,推荐看看以下文章:

  • CSS布局16例
  • onestab:三栏复合布局演示
  • onestab:自由舒展的三栏式版面

Tips:[onestab 的"P.I.E"专题] 还有更多出色介绍,推荐去看看。


返回类别: 教程
上一教程: W3C入门第4天:调用样式表
下一教程: W3C入门第11天:不用表格的菜单

您可以阅读与"W3C入门第10天:自适应高度"相关的教程:
· W3C入门第12天:校验及常见错误
· W3C入门第9天:第一个CSS布局实例
· W3C入门第4天:调用样式表
· W3C入门第11天:不用表格的菜单
· W3C入门第6天:XHTML代码规范
    微笑服务 优质保证 索取样品