The two-column equal-height layout should still be a relatively common layout. It is usually fixed on the left side and adaptive on the right side. Below is a picture of a project I have done recently.
As shown in the figure above, the height of the menu bar on the left and the main body of the page on the right are unknown, and no one knows how much content will be added later. But for the page to look good, the two sides must be the same height. Let's give you an in-depth analysis of the two schemes to achieve the same height layout.
Option 1: Pure CSS to achieve the same height (less code, good effect. I also recommend it)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
.wrap{overflow: hidden;}
.left{width: 100px; height: 200px; float: left; background: #149BDF; padding-bottom: 5000px; margin-bottom: -5000px;}
.right{width: 200px; height: 400px; margin-left: 150px; background: #32CD32;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
Let's take a look at the renderings first. Briefly speaking, the outer layer wraps a div with unlimited width and height, and overflow: hidden; must be added (cut the excess part). The div on the right determines the height of the entire page, so the height of the div on the left is determined by the height on the right. The height of the left div is 200, and the right is 400, but the height is realized visually. Why 
? The fundamental reason is to set its padding-bottom value (commonly known as inner padding). As we all know, the padding padding can be occupied by the background. If we only add a padding value to the left div, the page will look like this. As shown below:
Why, because the padding value also takes up space, even if the outermost div is set to overflow: hidden; but at this time its div is determined by the left div, what we have to do is the height of the outermost div from the right Determined, and the visible range of the div on the left is also determined by the div on the right. At this time, we add a negative margin value equal to its padding value to the left div. The effect is shown in the figure below. At this time, the overflow of the outermost div is removed: hidden;
As shown in the figure above, the height of the outermost div is 400, which is equal to the div on the right. The div on the left looks like a long tuft, and it actually occupies a height of only 200, which is its own height, because the negative margin value offsets the height occupied by its padding. Only the occupied space is offset, but in fact the "tuo" seen by people is still very long and long 
, we add an overflow: hidden; "cut" it, and then adjust the height of the right div arbitrarily. You can see the contour effect.
Option 2: Pure JS achieves the same height (simple and crude, easy to understand, directly on the code)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
html,body{height: 100%;}
.wrap{height: 100%;}
.left{width: 100px; height: 200px; float: left; background: #149BDF;}
.right{width: 200px; height: 50%; margin-left: 150px; background: #32CD32;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var h = $('.right').height();
console.log(h);
$('.left').height(h);
</script>
</body>
</html>The effect is the same as the third picture, so I won't show them one by one, but the above method has a drawback. Because js is executed after the page is loaded, and only executed once. If we change the size of the browser window, it will be a tragedy.
It looks like this. The height of the div on the right is determined by css, and it changes compliantly with browser changes. The height on the left is determined by js and must be refreshed to change. Affect the experience
But it's okay, there must be a road in front of the mountain. This little thing is not a big deal. There is a function in jquery that monitors changes in the browser window , called resize(). Change the window size and execute the function once. On the code:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
html,body{height: 100%;}
.wrap{height: 100%;}
.left{width: 100px; height: 200px; float: left; background: #149BDF;}
.right{width: 200px; height: 50%; margin-left: 150px; background: #32CD32;}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function setHeight(){
var h = $('.right').height();
console.log(h);
$('.left').height(h);
}
setHeight();
$(window).resize(function(){
setHeight();
})
</script>
</body>
</html>Okay, that's it!