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

第10天:自适应高度

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

WEB标准教程第10天:自适应高度

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

使用Web标准建站第10天:自适应高度

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

使用Web标准建站第10天:自适应高度

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

JAVA基础18天速成学习笔记之第10天

JAVA基础18天速成学习笔记之第10天 这是我在csdn下载的.觉得有助于复习Java所以贴了出来.感谢作者.下面附有下载地址. http://download.csdn.net/detail/...
  • thanklife
  • thanklife
  • 2013年11月08日 10:47
  • 1120

第10天

java真的是越来越有意思了!!!!!!不同于c的枯燥。java更注重与用户之间的交流。 听说要开始做项目了!真是越来越兴奋了。期待!...
  • lxhdm123
  • lxhdm123
  • 2015年08月04日 21:39
  • 168

第10天.

import javax.swing.JFrame;import javax.swing.JMenu;import javax.swing.JMenuBar;import javax.swing.JM...
  • yongxing14
  • yongxing14
  • 2008年06月24日 00:05
  • 198

2015年11月17日

一.IMOOC学习了函数章节1到10章 //函数的调用 #include int jjj() {  printf("**********\n");  return 0; }  ...
  • qq_29464127
  • qq_29464127
  • 2015年11月19日 10:35
  • 229

php 最近10天的所有日期

背景:有时候,比如画曲线图,需要近10天的日期
  • Kan_Auyeung
  • Kan_Auyeung
  • 2014年06月06日 17:46
  • 1055

戒烟第10天

  10天过的真快,今天好几次脑子里面都闪过了抽根烟的念头,还好被意识及时制止了,看来人的意志是很重要的。不管做什么事情,你不坚持下去,到头都是一场空,有可能还会适得其反,就象上次的戒烟修行一样。说到...
  • peanuthul
  • peanuthul
  • 2005年06月01日 23:16
  • 842
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第10天:自适应高度
举报原因:
原因补充:

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