纯CSS实现侧边栏/分栏高度自动相等
<!DOCTYPE html> <html lang="en"> <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> #content { overflow: hidden; } .left { width: 200px; /* 在小于3000的范围内都使用 */ margin-bottom: -3000px; padding-bottom: 3000px; background: blue; float: left; } .right { width: 400px; margin-bottom: -3000px; padding-bottom: 3000px; background: red; float: right; } .center { margin: 0 410px 0 210px; background: green; height: 2000px; } </style> </head> <body> <div id="content"> <div class="left">左边,无高度属性,自适应于最高一栏的高度</div> <div class="right">右边,无高度属性,自适应于最高一栏的高度</div> <div class="center">中间,高度600像素,左右两栏的高度与之自适应</div> </div> </body> </html>