• css+div自动适应高度，在IE和firefox下都能适应 (左右DIV自适应高度)

    网上找了些css+div自动适应高度的代码，用起来总是不对，这里求大侠们一段css+div自动适应高度的代码
     有两个问题：
       第一：div根据内容自动调整div的高度
       第二：左右结构的div，无论当左边的div还是右边的div高度增大时，高度小的div能自动调整高度，并且下方的div也自动往下移动位置
       
       希望大侠们不吝赐教，困惑好长时间了，希望在这里能够得到解决。


    我用了下面这种方法，很容易解决。

    <style type="text/css">
    #leftbox{float:left;200px; background-color:#FF0000;}
    #midbox{float:left;200px;background-color:#FFFF00}
    .bottom{display:block;clear:both;margin-top:50px;background:#000000;300px;height:200px;color:#FFF;}
    </style>
    <div id="leftbox">22</div>
    <div id="midbox">左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容</div>
    <script>
    if(midbox.offsetHeight>leftbox.offsetHeight)
    leftbox.style.height=midbox.offsetHeight+"px";
    else
    midbox.style.height=leftbox.offsetHeight+"px";
    </script>
    <div class="bottom">sssssssssssss</div>

    下面论坛上别人的答案。

     ---------------------------

    三列自适应高度
    可以根据自己需要修改
    兼容IE6 IE7 IE8 FireFox Chrome Opera Safari Netscape
    XML/HTML code?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    .main{
          600px;
          overflow:hidden;
          }
    .left{
          background:#999999;
          margin-bottom:-10000px;
          padding-bottom:10000px;
          200px;
          float:left;
          color:#FF0000;    
          }
    .center{
          background:#333333;
          margin-bottom:-10000px;
          padding-bottom:10000px;
          200px;
          float:left;
          color:#FF0000;
          }
    .right{
          background:#0000FF;
          margin-bottom:-10000px;
          padding-bottom:10000px;
          200px;
          float:left;
          }
    .bottom{
          600px;
          background:#CC00CC;
          color:#000000;
          height:100px;
          }
    -->
    </style>
    </head>
     
    <body>
    <div class="main">
       <div class="left">left</div>
       <div class="center">center<br />center<br />center<br />center<br />center<br />center<br />center<br /></div>
       <div class="right">right</div>
    </div>
    <div class="bottom">bottom</div>
    </body>
    </html>

    ---------------------------------------

    用javascript，类似：
    document.getElementById("firstindex_left").style.height = document.getElementById("pmain").offsetHeight + "px"; 
    --------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>New Document </title>
        <style type="text/css">
    body{
    margin:15px;
    font-family:Arial; font-size:12px;
    }
    .father{
    background-color:#ffff99;
    border:1px solid #111111;
    padding:5px;
    float:left;
    100%;
    }
    .father div{
    padding:10px;
    margin:0px 15px;
    border:1px dashed #111111;
    background-color:#90baff;
    display:inline;
    }
    .son1{
    float:left;
    }
    .son2{
    float:left;
    }
    .son3{
    float:right;
    }
    </style>
    </head>
    <body>
        <div class="father">
            <div class="son1">
                Box-1</div>
            <div class="son2">
                Box-2</div>
            <div class="son3">
                Box-3</div>
        </div>
    </body>
    </html>
     

    ---------------------------------------

    XML/HTML code?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD>
    <style>
    .container{
                        display:table;
                        600px;
                        background:#ff6600;
                        margin:0px;
                        padding-top:0;
                        padding-right:0;
                        padding-bottom:0;
                        padding-left:0;
                        }
    .leftbox{
                    300px;
                    background:#f00;
                    float:left;
                 
                    height:100%;
                     
                    }
    .rightbox{
                        300px;
                        height:100%;
                        background:#c90;
                        float:right;
                        }
    </style>
     <BODY>
      <div class="container">
            <div class="leftbox">
                就何必何必何必何必何必何必何必何必何必何必
            </div>
     
            <div class="rightbox">
                必何必何必何必何必何必何必何必何必何必何必何必何必必何必何必何必何必何必何必何必何必何必何必何必何必何必何必何必必何必何必何
        </div>
     </BODY>
    </HTML>
     
  • 相关阅读:
    Apache POI使用详解
    util.Date与sql.Date转换
    【转】javascript中not defined、undefined、null以及NaN的区别
    SELECT INTO 和 INSERT INTO SELECT 两种表复制语句
    DC维护工具Repadmin
    Outlook 配置exchange 缓慢，无法通过
    Windows 服务器站点设置
    Exchange 挂载点权限问题
    Windwos 查看WWN Number
    Exchange 2016 多站点创建oab shadow 副本
  • 原文地址：https://www.cnblogs.com/kentyshang/p/2773135.html
Copyright © 2020-2023  润新知