问题描述：
两列布局，其中右侧的高度是根据内容变化的，希望左侧的高度也能和右侧保持一致。
示例中左侧为青色背景的行内块，右侧为图片，代码如下：
1 <!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 <title>Equal Height</title> 7 <style> 8 .container { 9 /* 将父元素的字体设为0，解决图片和行内元素之间的间距 */ 10 font-size: 0; 11 border: 1px solid #999; 12 } 13 .left { 14 width: 200px; 15 padding: 10px 0; 16 background-color: #76e2e4; 17 text-align: center; 18 display: inline-block; 19 } 20 img { 21 vertical-align: top; 22 max-width: 500px; 23 max-height: 600px; 24 } 25 </style> 26 </head> 27 <body> 28 <h4>Equal Height</h4> 29 <div class="container"> 30 <div class="left"> 31 <button id="mzzi1">换个妹子</button> 32 </div> 33 <img 34 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9" 35 alt="" 36 /> 37 </div> 38 </body> 39 <script> 40 let urls = [ 41 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb" 42 ]; 43 window.onload = () => { 44 let img = document.querySelector(".container img"); 45 let btns = document.querySelectorAll(".left button"); 46 btns[0].onclick = () => { 47 img.src = urls[0]; 48 }; 49 }; 50 </script> 51 </html>
右侧的高度根据图片的变化而变化，而左侧的高度默认情况下没有保持一致。
这就是等高列问题，介绍几种实现实现方法：
一、Flex方法
1 <!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 <title>Equal Height Flex</title> 7 <style> 8 .container { 9 display: flex; 10 border: 1px solid #999; 11 } 12 .left { 13 width: 200px; 14 padding-top: 10px; 15 background-color: #76e2e4; 16 text-align: center; 17 } 18 img { 19 max-width: 500px; 20 max-height: 600px; 21 } 22 </style> 23 </head> 24 <body> 25 <h4>Equal Height Flex</h4> 26 <div class="container"> 27 <div class="left"> 28 <button id="mzzi1">换个妹子</button> 29 </div> 30 <img 31 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9" 32 alt="" 33 /> 34 </div> 35 </body> 36 <script> 37 let urls = [ 38 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb", 39 ]; 40 window.onload = () => { 41 let img = document.querySelector(".container img"); 42 let btns = document.querySelectorAll(".left button"); 43 btns[0].onclick = () => { 44 img.src = urls[0]; 45 }; 46 }; 47 </script> 48 </html>
二、Grid方法
1 <!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 <title>Equal Height Grid</title> 7 <style> 8 .container { 9 display: grid; 10 grid-template-columns: 200px auto; 11 border: 1px solid #999; 12 } 13 .left { 14 width: 200px; 15 padding-top: 10px; 16 background-color: #76e2e4; 17 text-align: center; 18 } 19 img { 20 max-width: 500px; 21 max-height: 600px; 22 } 23 </style> 24 </head> 25 <body> 26 <h4>Equal Height Grid</h4> 27 <div class="container"> 28 <div class="left"> 29 <button id="mzzi1">换个妹子</button> 30 </div> 31 <img 32 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9" 33 alt="" 34 /> 35 </div> 36 </body> 37 <script> 38 let urls = [ 39 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb", 40 ]; 41 window.onload = () => { 42 let img = document.querySelector(".container img"); 43 let btns = document.querySelectorAll(".left button"); 44 btns[0].onclick = () => { 45 img.src = urls[0]; 46 }; 47 }; 48 </script> 49 </html>
三、Position：sbsolute；方法
父容器相对定位，子元素绝对定位，高度为100%时会自动适应父容器的高度。所以当右侧的高度变化撑起父容器不同的高度时，左侧也会保持一致。
1 <!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 <title>Equal Height Position</title> 7 <style> 8 .container { 9 position: relative; 10 border: 1px solid #999; 11 } 12 .left { 13 position: absolute; 14 box-sizing: border-box; 15 width: 200px; 16 height: 100%; 17 padding-top: 10px; 18 background-color: #76e2e4; 19 text-align: center; 20 } 21 img { 22 margin-left: 200px; 23 vertical-align: bottom; 24 max-width: 500px; 25 max-height: 600px; 26 } 27 </style> 28 </head> 29 <body> 30 <h4>Equal Height Position</h4> 31 <div class="container"> 32 <div class="left"> 33 <button id="mzzi1">换个妹子</button> 34 </div> 35 <img 36 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9" 37 alt="" 38 /> 39 </div> 40 </body> 41 <script> 42 let urls = [ 43 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb", 44 ]; 45 window.onload = () => { 46 let img = document.querySelector(".container img"); 47 let btns = document.querySelectorAll(".left button"); 48 btns[0].onclick = () => { 49 img.src = urls[0]; 50 }; 51 }; 52 </script> 53 </html>
四、Table方法
1 <!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 <title>Equal Height Table</title> 7 <style> 8 .container { 9 display: table; 10 border: 1px solid #999; 11 } 12 .left { 13 display: table-cell; 14 vertical-align: top; 15 width: 200px; 16 padding-top: 10px; 17 background-color: #76e2e4; 18 text-align: center; 19 } 20 img { 21 font-size: 0; 22 display: table-cell; 23 max-width: 500px; 24 max-height: 600px; 25 } 26 </style> 27 </head> 28 <body> 29 <h4>Equal Height Table</h4> 30 <div class="container"> 31 <div class="left"> 32 <button id="mzzi1">换个妹子</button> 33 </div> 34 <img 35 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9" 36 alt="" 37 /> 38 </div> 39 </body> 40 <script> 41 let urls = [ 42 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb", 43 ]; 44 window.onload = () => { 45 let img = document.querySelector(".container img"); 46 let btns = document.querySelectorAll(".left button"); 47 btns[0].onclick = () => { 48 img.src = urls[0]; 49 }; 50 }; 51 </script> 52 </html>
五、Margin: -9999px + Pading: 9999px方法
垂直方向margin无法改变元素的内部尺寸，但却能改变外部尺寸，这里我们设置了margin-bottom:-9999px意味着元素的外部尺寸在垂直方向上小了9999px。默认情况下，垂直方向块级元素上下距离是0，一旦margin-bottom:-9999px就意味着后面所有元素和上面元素的空间距离变成了-9999px，也就是后面元素都往上移动了9999px。此时，通过神来一笔padding-bottom:9999px增加元素高度，这正负一抵消，对布局层并无影响，但却带来了我们需要的东西—视觉层多了9999px高度的可使用的背景色。但是，9999px太大了，所以需要配合父级overflow:hidden把多出来的色块背景隐藏掉，于是实现了视觉上的等高布局效果。
1 <!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 <title>Equal Height Margin</title> 7 <style> 8 /* 容器设置自然高度，设置overflow: hidden; 9 子元素设置 10 margin-bottom: -9999px; 11 padding-bottom: 9999px; */ 12 .container { 13 overflow: hidden; 14 border: 1px solid #999; 15 } 16 .left { 17 float: left; 18 width: 200px; 19 padding-top: 10px; 20 background-color: #76e2e4; 21 text-align: center; 22 margin-bottom: -9999px; 23 padding-bottom: 9999px; 24 } 25 img { 26 /* 对齐 */ 27 vertical-align: middle; 28 max-width: 500px; 29 max-height: 600px; 30 } 31 </style> 32 </head> 33 <body> 34 <h4>Equal Height Margin</h4> 35 <div class="container"> 36 <div class="left"> 37 <button id="mzzi1">换个妹子</button> 38 </div> 39 <img 40 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F100H0113K8%2F20100G13K8-7-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709622&t=df224c9393368e871e7bcc7a454e58d9" 41 alt="" 42 /> 43 </div> 44 </body> 45 <script> 46 let urls = [ 47 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fmobile%2F2020-05-13%2F5ebba71243a85.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643709918&t=41e048a206e8ac4cc241790f520454cb" 48 ]; 49 window.onload = () => { 50 let img = document.querySelector(".container img"); 51 let btns = document.querySelectorAll(".left button"); 52 btns[0].onclick = () => { 53 img.src = urls[0]; 54 }; 55 }; 56 </script> 57 </html>
效果：
说明：
妹子图片来自网络，侵必删~