左侧内容随右侧内容高度自适应高度_左侧高度自适应右侧高度-CSDN博客

本文链接：https://blog.csdn.net/jx950915/article/details/81741513

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,body {
            height: 100%;
        }
        .container {
            width: 960px;
            height: 100%;
            /* overflow: hidden; */
            margin: 0 auto;
        }

        .left,
        .right {
            border: 1px solid red;
            box-sizing: border-box;
        }

        .left {
            height: 100%;
            width: 200px;
            overflow: hidden;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
            float: left;
            background:#eee;
            /* display: inline; */
        }

        .right {
            width: 750px;
            float: right;
            height: auto;
            min-height: 100%
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>
</body>

这样右侧内容不管有多少，左侧高度会自适应和右侧内容高度一致

不过这个有点顾头不顾脑的意思，因为左侧高度高于右侧的时候，左侧内容会被隐藏

小解决方案

初始化的时候如果右侧内容没左侧内容高，就给他定义一个min-height，然后动态添加右侧内容的时候height还是auto，暂时算是达到了心中的预期

//li往死里复制看看，我实验的时候就复制了很多，这里就不好全部贴出来了
<div class="left">
    <ul>
        <li>11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>


    </ul>
</div>
<div class="right">
    <ul class="ul">
        <li onclick="add()">11</li>
        <li>11</li>
        <li>11</li>
        <li>11</li>
    </ul>
</div>
window.onload = function(){
    var h1= $('ul').height();
    var h2= $('.right').height()
    if(h1>h2){
        $('.right').css('min-height',h1)
    }  
}
function add(){
    $('.ul').append('<li>2222</li>')
}