zoukankan      html  css  js  c++  java
  • Div中高度自适应增长方法

    <html>  
    
    <head>  
    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    
     <title>Div高度自适应</title>  
    
     <style type="text/css">  
    
     #wrap{overflow:hidden;}  
    
     #sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}  
    
     </style>  
    
     </head>  
    
     <body>  
    
     <div id="wrap" style="300px; background:#FFFF00;">  
    
     <div id="sidebar_left" style="float:left;100px; background:#777;">居左</div>  
    
     <div id="sidebar_mid" style="float:left;100px; background:#999;">  
    
     居中<br />  
    
     居中<br />  
    
     居中<br />  
    
     居中<br />  
    
     居中<br />  
    
     居中<br />  
    
     居中<br />  
     居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br />  居中<br />  
    
     居中<br /> 
     </div>
     <div id="sidebar_right" style="float:right;100px; background:#888;">居右</div></div>  
    
     </body>  
    
     </html> 

    方法二:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>123</title>
    </head>
    <body>
    <div style="500px;background:#cccccc;height:0px;">  
    <div id="right" style="380%;height:100%;float:left;border:1px solid #265492;">left</div>  
    <div id="left" style="60%;;float:left;background:#376037;">  
    right<br>  
    right<br>  
    right<br>  
    right<br>  
    right<br>  
    right<br>  
     
    </div>  
    </div>  
    
    <script type="text/javascript">  
    <!--    --> 
    var a=document.getElementById("left");  
    var b=document.getElementById("right");  
    if(a.clientHeight<b.clientHeight){  
    a.style.height=b.clientHeight+"px";  
     }else{   
       b.style.height=a.clientHeight+"px";  
     }  
    
     </script> 
    
    
    </body>
    </html>

    方法三 背景图填充法

    这是大站用得比较多的方法,如163等,研究了一下,结果如下。

    这里是给父DIV设置了背景图片填充,所有DIV都不设高度。

    HTML代码:
    
    view sourceprint?1 <div class="endArea">  
    
    2 <div class="col1">第一列 左边正文</div>  
    
    3 <div class="col3">第二列 右边<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />字字</div>  
    
    4 <div class="col2">第三列 中间图片</div>  
    
    5 <div class="clear"></div>  
    
    6 </div> 
    
    CSS代码:
    
    view sourceprint?1 .endArea{margin:0 auto; 960px; background:url(http://cimg2.163.com/cnews/img07/end_n_bg1.gif); clear:both;}  
    
    2 .endArea .col1{float:left; 573px; }  
    
    3 .endArea .col2{float:left; 25px; }  
    
    4 .endArea .col3{float:right; 362px;} 
  • 相关阅读:
    PHP 类的继承问题
    爬虫第一章
    如何给CBV添加装饰器
    结巴分词 gensim系数矩阵相似度 pypinyin
    elasticsearch 第二章 elasticsearch的详细用法及参数
    运维自动化 第五章 playbook 模块补充
    运维自动化 第四章 模块
    运维自动化 第三章 ansible
    正则补充
    运维自动化 第二章 openpyxl的用法,读写excel内容
  • 原文地址:https://www.cnblogs.com/softmans/p/3494298.html
Copyright © 2011-2022 走看看