左侧内容随右侧内容高度自适应高度
程序员文章站
2022-07-14 22:29:53
...
<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>')
}上一篇： 清除浮动的几种方法