中小学教师招聘 智力开发 记忆力培养 笑话 古诗 成语 名人名言 歇后语 开心辞典 生活物理 生活化学
电脑乐园_为您服务教育网
网页制作技巧
 古诗词欣赏 2014中考 2014高考


热点推荐:假神童的泡泡是怎么吹大的 书包越来越鼓眼皮越来越重 法教育部将禁学生带手机 多动症儿童普校管不了特校收不了 孩子超十点睡小心长不高
孩子攀比成风背后的原因是什么 青春期孩子情绪不好家长要学会 班主任管理工作中几个细节 虚伪的素质教育比应试更可怕 老师的抱怨揭出教师真实现状


专题:中小学电子课本 培养孩子能力 自信心培养 注意力培养 戒网瘾 应对叛逆 防早恋 做称职父母 智力开发 小学各科教学资源
  您的当前位置是:《为您服务教育网》首页>>>电脑乐园>>>网页制作技巧>>>十天精通DIV+CSS之10:自适应高度
十天精通DIV+CSS之10:自适应高度

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

  Body 

  这个例子的页面主要代码如下:
  <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:自由伸展的三栏式版面



  ☆ 十天精通DIV+CSS之10:自适应高度
  ☆ 十天精通DIV+CSS之9:CSS布局实例
  ☆ 十天精通DIV+CSS之8:CSS布局入门
  ☆ 十天精通DIV+CSS之7:CSS简单入门
  ☆ 十天精通DIV+CSS之6:XHTML代码规范
  ☆ 十天精通DIV+CSS之5:head区其他设置
  ☆ 十天精通DIV+CSS之4:如何调用样式表
  ☆ 十天精通DIV+CSS之3:定义语言编码
  ☆ 十天精通DIV+CSS之2:什么是名字空间
  ☆ 十天精通DIV+CSS之1:选择DOCTYPE


联系我们 本站搜索 要资料 请您留言 开心智慧吧 动画 笑话 安平影像 周恩来总理
为您服务教育网——全心全意为中国教育免费服务(Copyright© 2001-2017 河北·衡水) 安平明德小学 一小学前三班
冀ICP备06009845号