设置像素div后填充div的其余部分[重复]答案

【问题标题】：Fill rest of div after set pixel div [duplicate]设置像素div后填充div的其余部分[重复]
【发布时间】：2013-02-08 00:18:36
【问题描述】：

我有一个不同宽度的 div。里面还有另外两个，一个是固定宽度，另一个应该填满该区域的其余部分。但我不能让它总是填满。根据外盒的宽度，它要么太小，要么太大并低于 inner-box-1。如何让 inner-box-2 填充外盒的其余部分？

http://jsfiddle.net/Y57YP/

HTML

<div id ="outer-box">
   <div id="inner-box-1"></div>
   <div id="inner-box-2"></div>
</div>

CSS

#outer-box{
  width:50%;
  background:#fcc;
  position: relative;
  overflow: auto;
}
#inner-box-1{
  height:50px;
  width:50px;
  background:#ccc;
  float:left;
}
#inner-box-2{
  height:50px;
  width:80%;
  background:#555;
  float:left;
}

【问题讨论】：

标签： html css

【解决方案1】：

这是很容易但完全不直观的奇怪答案之一。需要结合使用overflow属性和float属性来触发block formatting context。

看到这个jsFiddle example。

#inner-box-2{
   height:50px;
   background:#555;
   overflow:auto;
}

我所做的只是从您的#inner-box-2 div 中删除宽度和浮动并添加一个overflow:auto

【讨论】：