当前位置:  编程技术>WEB前端

第10天:自适应高度

    来源: 互联网  发布时间:2014-09-06

    本文导语:  如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。...

如果我们想在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;}

这里是主要内容,根据内容自动适应高度

这里是主要内容,根据内容自动适应高度

这里是主要内容,根据内容自动适应高度

这个例子的页面主要代码如下:



    
    
    


具体样式表都写在相应版块里了。重点在于#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"专题] 还有更多精彩介绍,推荐去看看。


    
 
 

您可能感兴趣的文章:

  • 父div高度不能自适应子div高度的解决方案
  • textarea自适应高度插件 textareaAutoHeight
  • 研究了一下div+css的高度自适应问题
  • [转]目前找到的最好的Iframe自适应高度代码
  • jsp页面iframe高度自适应的js代码
  • Jquery实现iframe高度自适应的代码
  • 让iframe自适应高度(支持xhtml)IE firefox兼容
  • 教你用jquery实现iframe自适应高度
  • javascript原生和jquery库实现iframe自适应高度和宽度
  • 层自动适应高度
  • Iframe自适应高度兼容ie,firefox多浏览器
  • Iframe自适应其加载的内容高度
  • 典型的三行二列居中高度自适应布局
  • iframe自适应高度的多种方法方法小结
  • 脚本控制三行三列自适应高度DIV布局
  • 脚本控制三行三列自适应高度DIV布局的代码
  • 解决列高度自适应(相同)的五种方法
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery 自适应图片 HiSRC
  • 自适应页面背景插件 jQuery.resBg
  • 图片弹出自适应插件 Galpop
  • 如何把10/100M自适应改为10M模式
  • 高人帮帮忙,如何实现显示器的自适应?
  • 100M/10M自适应网卡为何只有10M?
  • 谁能让图片随 Frame 的大小变化自动适应窗口,帮帮我
  • 用C或C++编程,模拟可变分区存储管理且首次适应的算法实现存储器的分配与回收
  • SOS:请问一个页面在不同分辨率下适应性的问题!
  • CSS控制图片大小-适应宽度
  • 基于JTable的列宽与内容自适应的实现方法
  • CSS网页布局入门教程2:一列自适应宽度
  • Android中让图片自适应控件的大小的方法
  • Asp.net设置GridView自适应列宽的实现代码
  • 请问那一种linux适应于初学者?
  • CSS网页布局入门教程6:左列固定,右列宽度自适应
  • 研究了一下div+css的高度自适应问题 iis7站长之家
  • CSS网页布局入门教程5:二列宽度自适应
  • div+css实现自适应宽度按钮
  • 固定右栏宽度, 左栏内容先出现同时自适应宽度的布局


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3