第10天:自适应高度

转载 2012年03月29日 10:24:41

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

里是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }

里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; },背景色用的是#main的背景色

里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

里是主要内容,根据内容自高度

里是主要内容,根据内容自高度

里是主要内容,根据内容自高度

里是#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }

个例子的面主要代如下:

<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"专题] 有更多精彩介,推荐去看看

相关文章推荐

button自适应高度和自动换行

  • 2016年07月14日 17:37
  • 74KB
  • 下载

iOS 高度自适应

  • 2016年07月19日 15:35
  • 31KB
  • 下载

android ScollView 嵌套 WebView 底部空白,高度无法自适应解决

对技术感兴趣的同鞋加群 544645972 一起交流。 最近要做一个页面,需要 ScrollView 嵌套 WebView,怎么嵌套,怎么解决焦点和 touch 事件冲突,网上一大堆,这里就不赘述了...

jQuery自适应宽度跟高度相册代码

  • 2015年07月18日 19:38
  • 1.03MB
  • 下载

门户窗口高度自适应插件

  • 2013年10月16日 09:26
  • 1KB
  • 下载

HTML 高度自适应布局

定义:高度自适应表示,在浏览器窗口边界变化,或在浏览器显示比例调整,这一过程中,浏览器中元素随着上述变化而自适应改变 height 属性值的特性 。 原理:当一个元素是绝对定位时,如果没有给它设...

iframe自适应高度

  • 2013年04月20日 20:18
  • 4KB
  • 下载

cell自适应高度

  • 2015年10月08日 23:37
  • 34KB
  • 下载

iOS cell高度自适应 - 教你写出优雅的table view

作为一个iOS开发者,自然少不了了table view打交道,table view中最令人头疼的是各种cell的高度计算了,虽然技术上并不难,但是对于自定义cell来说一旦控件比较多,计算起来就会很麻...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第10天:自适应高度
举报原因:
原因补充:

(最多只允许输入30个字)