只使用css实现 有两种方式,
一种是通过相对定位,再绝对定位获取父亲元素的高度,
一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <style>
*{margin: 0; padding: 0}
.wrap{
position: relative;
width:50px;
}
.wrap .left {
position: absolute;
height: 100%;
top: 0;
left: 50px;
background: lightblue;
}
.wrap .main {
background: lightgray;
}
</style>
实现一,通过 定位获取父亲元素的高度实现
<div class="wrap">
<div class="left">
侧栏
</div>
<div class="main">
可以改变 高度 侧栏自动识别高度
</div>
</div> <style>
.wrap2{
overflow: hidden;
}
.wrap2 .left {
float: left;
width:20px;
margin-bottom: -999em;
padding-bottom: 999em;
background: lightgray;
}
.wrap2 .main {
float: left;
width:50px;
background: lightblue;
}
</style>
实现二,使用margin 和padding 配合使用
<div class="wrap2">
<div class="left">
侧栏
</div>
<div class="main">
可以改变 高度 侧栏自动识别高度
</div>
</div> </body>
</html>
弊端:
方案 2 针对是背景, 使用边框会 无下边框 需要注意,因为超出隐藏了,部分效果也有影响,