效果图
-
图一
-
图二
思路
将父元素相对定位，粉色区域绝对定位，蓝色区域右浮动即可。
对比使用js动态改变元素高度布局
- 会引起回流跟重绘,降低了性能。
回流：是指浏览器重新构建受到影响的dom树
重绘：是指浏览器重新绘制受影响的部分
引起回流的原因：基本上就是改变元素的位置，大小，文本内容，显示隐藏
引起重绘的原因：基本上就是改变元素的外观，不回影响布局的。
回流一定引起重绘，重绘不一定一起回流。
css性能优化
- 尽量不要使用层级选择器，
- 不要使用元素选择器，
- 不要使用属性选择器等。
代码如下：
<!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 <style>
9 *{
10 margin: 0;
11 padding: 0;
12 }
13 .box{
14 width: 800px;
15 overflow: hidden;
16 position: relative;
17 margin: 50px auto;
18 }
19 .left{
20 position: absolute;
21 top: 0;
22 right: 600px;
23 bottom: 0;
24 left: 0;
25 background: pink;
26 }
27 .right{
28 width: 600px;
29 height: 200px;
30 float: right;
31 background: blue;
32 }
33 .btn-wrap{
34 width: 800px;
35 margin: 0 auto;
36 overflow: hidden;
37 }
38 .btn{
39 width: 50px;
40 height: 30px;
41 float: right;
42 margin-left: 50px;
43 background: #eee;
44 }
45 </style>
46 </head>
47 <body>
48 <div class="box">
49 <div class="left"></div>
50 <div class="right"></div>
51 </div>
52
53 <div class="btn-wrap">
54 <button class="btn add">加</button>
55 <button class="btn sub">减</button>
56 </div>
57 <script>
58 var right = document.getElementsByClassName("right")[0],
59 add = document.getElementsByClassName("add")[0],
60 sub = document.getElementsByClassName("sub")[0];
61
62 add.onclick = () => {
63 right.style.height = right.offsetHeight + 20 + 'px';
64 }
65
66 sub.onclick = () => {
67 right.style.height = right.offsetHeight - 20 + 'px';
68 }
69 </script>
70 </body>
71 </html>
有错误之处，欢迎指教。谢谢，阅读。
