引用fieldset-legend示例
Jmail发送邮件实例

21st

2008,04

DIV-CSS网页布局:Div自适应高

Web2.0标准化cngothic

DIV-CSS网页布局:Div自适应高DIV的最小高度的设置方法
在div+css布局时常遇到div高度无法自适应的情况。除非把DIV设定height属性。但你在设置时又不会完成准确。
如果理想的高为800px:。但现在的高不到800的话会导致这一例的背景区域不够高。背景将成为白色或标签设置的色彩.下面把我收录的例子共享下。利用JS来解决div自适应高的问题.
在此再说明一小情况：最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向下延伸，但到目前为止，只有Opera 和 Mozilla 支持，IE7开始也支持了，但IE7处于测试阶段，等正式版发布到普及需一段也许比较长的时间，除非MS把它捆绑在某个操作系统上，如何在现有基础上（IE6 80-90%），合理、妙用最小高度了？
Div最小高度

  1. min-height:100px;
  2. ie6不支持与参数用height:100px;来解决
  3. Div自适应高

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. <!-- saved from url=(0052)http://www.forest53.com/tutorials/test/3columns.html -->
  3. <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>脚本控制三行三列自适应高度DIV布局</TITLE>
  4. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  5. <SCRIPT type=text/javascript>
  6. /*
  7.   ------------------------------------------------
  8.   PVII Equal CSS Columns scripts
  9.   Copyright (c) 2005 Project Seven Development
  10.   www.projectseven.com
  11.   Version: 1.5.0
  12.   ------------------------------------------------
  13. */
  14. function P7_colH(){ //v1.5 by PVII-www.projectseven.com
  15.  var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
  16.  for(i=0;i<dA.length;i++){dA[i].style.height='auto';}for(i=0;i<dA.length;i++){
  17.  oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i<dA.length;i++){if(an){
  18.  dA[i].style.height=h+'px';}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){
  19.  for(i=0;i<dA.length;i++){hh=dA[i].offsetHeight;if(hh>h){
  20.  dA[i].style.height=(h-(hh-h))+'px';}}}else{document.p7eqa=1;}
  21.  document.p7eqth=document.body.offsetHeight;
  22.  document.p7eqtw=document.body.offsetWidth;}
  23. }
  24. function P7_eqT(){ //v1.5 by PVII-www.projectseven.com
  25.  if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
  26.  P7_colH();}
  27. }
  28. function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
  29.  if(document.getElementById){document.p7eqc=new Array;for(i=0;i<arguments.length;i++){
  30.  document.p7eqc[i]=document.getElementById(arguments[i]);}setInterval("P7_eqT()",10);}
  31. }
  32. function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com
  33.  var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
  34.  ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
  35.  oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
  36.  if(nh<adT){setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);}
  37. }
  38. </SCRIPT>
  39.  
  40. <STYLE type=text/css>BODY {
  41. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
  42. }
  43. #header {
  44. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
  45. }
  46. #mid {
  47. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
  48. }
  49. #footer {
  50. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
  51. }
  52. #header {
  53. BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px
  54. }
  55. H3 {
  56. MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
  57. }
  58. H5 {
  59. MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
  60. }
  61. #fbox {
  62. BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
  63. }
  64. #mbox {
  65. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px
  66. }
  67. #sbox {
  68. BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
  69. }
  70. P {
  71. PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px
  72. }
  73. #footer {
  74. CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center
  75. }
  76. </STYLE>
  77.  
  78. <META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
  79. <BODY onLoad="P7_equalCols('fbox','mbox','sbox')">
  80. <DIV id=header>
  81. <H3>脚本控制三行三列自适应高度DIV布局</H3></DIV>
  82. <DIV id=mid>
  83. <DIV id=fbox>
  84. <P>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
  85. 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
  86. </P>
  87. <P>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
  88. 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
  89. </P></DIV>
  90. <DIV id=mbox>
  91. <P>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
  92. 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
  93. </P>
  94. <P>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
  95. 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </P>
  96. <P>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
  97. 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
  98. </P>
  99. <P>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
  100. 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </P></DIV>
  101. <DIV id=sbox>
  102. <P>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
  103. 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。
  104. </P></DIV></DIV>
  105. <DIV id=footer>
  106. <H5>欢迎访问：<A href="http://www.yzci.com/">Yzci.Com</A></H5>
  107. </DIV></BODY></HTML>

, , ,

Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

2 Comments so far...

  1. woou
    04 30th, 2008 at 12:57 pm

    js是一方面,
    笨办法也有,就是在内容最后增加一个空div

    这样就可以自适应了,这个方法ff ie 都可以
    最初是因为ff力不支持高度自适应,所以高手们发现了这个方法,ff支持.

  2. cngothic
    04 30th, 2008 at 5:44 pm

    欢迎woou
    以前看过一篇文章关于自适应高的。
    提到了height:100%;来解决。目前我做DIV＋css相当少。
    慢慢积累吧。

Leave a reply？