<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 让页面的高100%，如果不设置html，body 高100%的话，我们后面设置div高100%就没有效果了 */ html,body{ width:100%; height:100%; } body,div{ margin:0; padding:0; } /* 注意这里我给盒子添加了一个右边padding200px ，让中的那个盒子空200px给右边的盒子*/ #box{ position:relative; padding-right:200px; height:100%; } /* 让盒子左浮动 */ #box .left{ float:left; width:200px; height:100%; background-color:blue; } /* overflow让盒子独立出来，触动BFC，这里不设置overflow:hidden;的话他的宽就是100%了，但是我需要让他把左边的盒子的宽度空出来 */ #box .con{ overflow:hidden; height:100%; background-color:pink; } /* 这里不能设置浮动，只能是定位，因为中间的那个盒子没有浮动，所以中间的那个盒子会占据位置，只能用定位来做。 */ #box .right{ position:absolute; right:0; top:0; width:200px; height:100%; background-color:#000; } </style></head><body> <div id="box"> <div class="left"></div> <div class="con"></div> <div class="right"></div> </div></body></html> <!-- 这里虽然如果不给中间那个盒子设置overflow：hidden和给大盒子设置padding-right看起来效果是一样的，但是实际上是不一样的，如果你把左边和右边的背景颜色去掉，你就会发现，中间的那个盒子占满了整个屏幕 -->
