北京三原色创意科技有限公司

  • 平面设计

  • 名片设计印刷

    标志

    企业画册

    折页

    海报

网站首页 >> 三原色日志 >>

CSS高度自适应,CSS背景自动延伸(2)

« CSS高度自适应,CSS背景自动延伸CSS来控制网页背景 »

2009-1-27 0:3:12

CSS高度自适应,CSS背景自动延伸(2)

这是转自网络的文章，原文地址如下：upload/2009/1/200901310056030657.gif) repeat-y 300px;}

  • #column1{ float:left; width:300px;}
  • #column2{ float:right; width:476px;}
  • .clear{ clear:both;}
    • 复制代码

    2 JS脚本法：

    代码的原理基本就是：读取高度，判断高度，高度相等。

     

    代码如下

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5. <title>练习文档01</title>
    6. <style type="text/css">
    7. <!--
    8. body{
    9.     margin:0px;padding:0px;
    10. }
    11. .Div_top{
    12.         width:100%;
    13.         background:#93beff;
    14. }
    15. .Div_bottom{
    16.         width:100%;
    17.         background:#ff00fc;
    18. }
    19. .Div_Left{
    20.         position:absolute;
    21.         width:200px;
    22.         background:#ff6000;
    23.         left:0px;
    24. }
    25. .Div_Right{
    26.         margin-left: 200px;
    27.         background:#00c17b;
    28. }
    29. -->
    30. </style>
    31. <script>
    32. function SameH(leftDiv,rightDiv)
    33. {
    34. var a=document.getElementById(leftDiv);
    35. var b=document.getElementById(rightDiv);
    36. document.write(a.clientHeight+'--');
    37. document.write(b.clientHeight+'--');
    38. document.write(a.scrollHeight+'--');
    39. document.write(b.scrollHeight+'--');
    40. if (a.scrollHeight < b.scrollHeight)
    41. {
    42. a.style.height= b.scrollHeight+"px";
    43. }
    44. else
    45. {
    46. b.style.height= a.scrollHeight+"px";
    47. }
    48. }
    49. </script>
    50. </head>
    51. <body>
    52. <div class="Div_top">这是顶部的div</div>
    53. <div id="Div1" class="Div_Left">11111<br>222222<br>33333333<br>444444444<br>555555555</div>
    54. <div id="Div2" class="Div_Right">22222<br>dsaf</div>
    55. <div class="Div_bottom">---------------------------------这是底部的DIV，在左中右中DIV 不等高的情况下会跑上去重叠了<br>----------------------------------------我现在想用一个 JavaScript代码来令左右两半的Div等高<br><br>(注意:中左中右两个DIV的高度是无法事先确定 的)</div>
    56. <script>
    57. SameH("Div1","Div2");
    58. </script>
    59. </body>
    复制代码

    3 容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法

    原作者:Alex Robinson

     

    原文标题:Equal Height Columns

     

    这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本 的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

     

    代码

    1. #wrap{
    2. overflow: hidden;
    3. }
    4.  
    5.  
    6. #sideleft, #sideright{
    7. padding-bottom: 32767px;
    8. margin-bottom: -32767px;
    9. }
    复制代码

    实现原理：

    块元素必须包含在一个容器里。

     

    应用overflow: hidden 到容器里的元素。

     

    应用 padding-bottom（足够大的值）到列的块元素 。

     

    应用margin-bottom（足够大的值）到列的块元素。

     

    padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

     

    兼容各浏览器

     

    IE Mac 5

     

    得到高度正确，所以要过滤掉上面的代码。

    1. /*\*/
    2. #sideleft, #sideright{
    3. padding-bottom: 32767px;
    4. margin-bottom: -32767px;
    5. }
    6. /**/
    复制代码

    Opera

     

    1. Opera7.0-7.2不能正确清除溢出部分，所以要加：

    1. /* easy clearing */
    2. #wrap:after
    3. {
    4. content: '[DO NOT LEAVE IT IS NOT REAL]';
    5. display: block;
    6. height: 0;
    7. clear: both;
    8. visibility: hidden;
    9. }
    10. #wrap
    11. {
    12. display: inline-block;
    13. }
    14. /*\*/
    15. #wrap
    16. {
    17. display: block;
    18. }
    19. /* end easy clearing */
    20. /*\*/
    复制代码

    2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：

    1. /*\*/
    2. #sideleft, #sideright
    3. {
    4. padding-bottom: 32767px !important;
    5. margin-bottom: -32767px !important;
    6. }
    7. @media all and (min-width: 0px) {
    8. #sideleft, #sideright
    9. {
    10. padding-bottom: 0 !important;
    11. margin-bottom: 0 !important;
    12. }
    13. #sideleft:before, #sideright:before
    14. {
    15. content: '[DO NOT LEAVE IT IS NOT REAL]';
    16. display: block;
    17. background: inherit;
    18. padding-top: 32767px !important;
    19. margin-bottom: -32767px !important;
    20. height: 0;
    21. }
    22. }
    23. /**/
    复制代码

    3.Opera9的B2在修正8的bug.

     

    测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。


     

    最终效果:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
    6. <style type="text/css">
    7. body{
    8.         padding: 0;
    9.         margin: 0;
    10.         font-size: 12px;
    11.         font-family: Arial, Helvetica, sans-serif;
    12.         line-height: 140%;
    13.         text-align: center;
    14.         background:#E7DFD3;
    15. }
    16. #wrap{
    17.         width: 750px;
    18.         margin: 0 auto;
    19.         overflow: hidden;
    20. }
    21. #header{
    22.         background: #E8E8E8;
    23. }
    24. #sideleft{
    25.         width: 580px;
    26.         float: left;       
    27.         background: #FFF;
    28.         text-align: left;
    29. }
    30. #sideright{
    31.         width: 170px;
    32.         float: left;
    33.         background: #F0F0F0;
    34.         text-align: left;
    35. }
    36. /* easy clearing */
    37. #wrap:after
    38.         {
    39.         content: '[DO NOT LEAVE IT IS NOT REAL]';
    40.         display: block;
    41.         height: 0;
    42.         clear: both;
    43.         visibility: hidden;
    44.         }
    45. #wrap
    46.         {
    47.         display: inline-block;
    48.         }
    49. /*\*/
    50. #wrap
    51.         {
    52.         display: block;
    53.         }
    54. /* end easy clearing */
    55. /*\*/
    56. #sideleft, #sideright
    57.         {
    58.         padding-bottom: 32767px !important;
    59.         margin-bottom: -32767px !important;
    60.         }
    61. @media all and (min-width: 0px) {
    62. #sideleft, #sideright
    63.         {
    64.         padding-bottom: 0 !important;
    65.         margin-bottom: 0 !important;
    66.         }
    67. #sideleft:before, #sideright:before
    68.         {
    69.         content: '[DO NOT LEAVE IT IS NOT REAL]';
    70.         display: block;
    71.         background: inherit;
    72.         padding-top: 32767px !important;
    73.         margin-bottom: -32767px !important;
    74.         height: 0;
    75.         }
    76. }
    77. /**/
    78. #footer{
    79.         background: #E8E8E8;
    80.         width: 100%;
    81.         float: left;
    82. }
    83. h1,h2,address,p{
    84.         margin: 0;
    85.         padding: .8em;
    86. }
    87. h1,h2{font-size: 20px;}
    88. </style>
    89. </head>
    90. <body>
    91. <div id="wrap">
    92.   <div id="header">
    93.     <h1>Head</h1>
    94.   </div>
    95.   <div id="sideleft">
    96.   <h2>sideleft</h2>
    97.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    98.     <p> 像素是计算机屏幕上的不可缩放的点，而一个
    99.       h3 就是一个字大小的方块。由于字体大小的变化， h3
    100.       代表用户喜欢的文字大小的相对单位。 </p>
    101.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    102.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    103.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    104.     <p> 像素是计算机屏幕上的不可缩放的点，而一个
    105.       h3 就是一个字大小的方块。由于字体大小的变化， h3
    106.       代表用户喜欢的文字大小的相对单位。 </p>
    107.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    108.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    109.    
    110.   </div>
    111.   <div id="sideright">
    112.   <h2>sideright</h2>
    113.     <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    114.     <p> 像素是计算机屏幕上的不可缩放的点，而一个
    115.       h3 就是一个字大小的方块。由于字体大小的变化， h3
    116.       代表用户喜欢的文字大小的相对单位。 </p>
    117.     <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    118.     <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    119.   </div>
    120.   <div id="footer">
    121.     <address>
    122.     Footer
    123.     </address>
    124.         <p>制作：<a href="http://www.forest53.com">forestgan</a></p>
    125.   </div>
    126. </div>
    127. </body>
    128. </html>

    以上文章还可参考：CSS高度自适应,CSS背景自动延伸

    Tags: CSS  网页背景  
    发布:长江VS长征 | 分类:常用Html代码 | 评论:0 | 引用:0 | 浏览:

    发表评论:

    ◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

    日历

    热门标签TagCloud

    最新评论及回复

    最近发表

    Search

    文章归档

    网站收藏

    图标汇集

    Powered By Z-Blog 1.8 Spirit Build 80710 Code detection by Codefense

    Copyright 三原色创意 SYSCY.COM. Some Rights Reserved.