html--伪等高布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>伪等高布局</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            
            #wrap{
                750px;
                border: 1px solid;
                margin: 0 auto;
                overflow: hidden;
            }
            #wrap .left{
                float: left;
                 200px;
                background: pink;
              padding-bottom: 1000px;
                margin-bottom:-1000px;
            }
            #wrap .right{
                float: left;
                 500px;
                background: deeppink;
                padding-bottom: 1000px;
                margin-bottom:-1000px;
                
            }
            
            clearfix{
                *zoom: 1;
            }
           clearfix:after{
               content:"";
               display: block;
               clear:both;
           }
            
        </style>
    </head>
    <body>
                <div id="wrap" class="clearfix">
            <div class="left">
                无限高度 <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
                left <br />
            </div>
            <div class="right">
                无限宽度<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
                right<br />
            </div>
        </div>
    </body>
</html>
    </body>
</html>

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>伪等高布局</title><style type="text/css">*{margin:0;padding:0;}#wrap{750px;border: 1px solid;margin: 0 auto;overflow: hidden;}#wrap .left{float: left; 200px;background: pink; padding-bottom: 1000px;margin-bottom:-1000px;}#wrap .right{float: left; 500px;background: deeppink;padding-bottom: 1000px;margin-bottom:-1000px;}clearfix{*zoom: 1;} clearfix:after{ content:""; display: block; clear:both; }</style></head><body><div id="wrap" class="clearfix"><div class="left">无限高度 <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br />left <br /></div><div class="right">无限宽度<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /></div></div></body></html></body></html>

相关阅读:
SQL Server 中，将多行转换为一行，用某个符号隔开的SQL 语句
 JQ 轻松学会$.get()，$.post()，$ajax()的作用和用法
 Dynamics 365 组织服务查询时，关于输入时间和输出时间的时区问题讲解
 在Dynamics 365的标准窗体，lookup字段变成了[Object Object]，picklist直接展示数字
 C# 回顾正则表达式的常用语法
 观洛马琴科对决洛佩兹比赛有感
 读取硬盘序列号
 delphi 数组复制利用CopyMemory 最为完美
 MFC多线程通讯--自定义消息
 MFC 多线程及线程同步
原文地址：https://www.cnblogs.com/hack-ing/p/11750468.html