1. 绝对定位+margin：auto
1.1 思路
为左右设置宽度，为左中右设置高度100%，给个背景颜色左中右设置absolute定位，左边设置left为0，右边设置right为0，中间设置left、right为左右的宽度由于中间需要自适应宽度，所以设置margin：auto1.2 代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.left {width: 50px;height: 100%;position: absolute;left: 0;background-color: skyblue;}.main {height: 100%;position: absolute;left: 50px;right: 50px;margin: auto;background-color: pink;}.right {width: 50px;height: 100%;position: absolute;right: 0;background-color: skyblue;}</style></head><body><div class="div"><div class="left">left</div><div class="main">main</div><div class="right">right</div></div></body></html>
1.3 效果
2. flex弹性布局
2.1 思路
为父盒子设置flex属性给html、body、父盒子、左中右设置高度为100%，顺便给左中右设置一个颜色为左中右设置order属性，依次是1、2、3为左右设置flex属性为0 0 宽度，为中间设置flex为auto2.2 代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.div {height: 100%;display: flex;}.left {height: 100%;background-color: skyblue;flex: 0 0 50px;order: 1;}.main {height: 100%;background-color: pink;flex: auto;order: 2;}.right {height: 100%;background-color: skyblue;flex: 0 0 50px;order: 3;}</style></head><body><div class="div"><div class="left">left</div><div class="main">main</div><div class="right">right</div></div></body></html>
2.3 效果
3. 浮动
3.1 思路
给html、body、父盒子、左中右设置高度为100%，顺便给左中右设置一个颜色左右盒子设置宽度，中间盒子宽度设置为100%（很重要）左盒子设置左浮动，右盒子设置右浮动3.2 代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.div {height: 100%;display: flex;}.left {float: left;width: 50px;height: 100%;background-color: skyblue;}.main {width: 100%;height: 100%;background-color: pink;}.right {float: right;width: 50px;height: 100%;background-color: skyblue;}</style></head><body><div class="div"><div class="left">left</div><div class="main">main</div><div class="right">right</div></div></body></html>
