<!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看起来效果是一样的，但是实际上是不一样的，如果你把左边和右边的背景颜色去掉，你就会发现，中间的那个盒子占满了整个屏幕 -->