浮动 div 填充剩余空间答案

【问题标题】：Floated div to fill remainder space浮动 div 填充剩余空间
【发布时间】：2014-10-17 03:50:19
【问题描述】：

我在这里设置了一个 CodePen：http://codepen.io/anon/pen/Isqou

div.linksBox {
border:1px solid #a9a9a9;
background:#fff;
-moz-box-shadow:0 5px 12px rgba(0,0,0,0.3);
-webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3);
box-shadow:0 5px 12px rgba(0,0,0,0.3);
margin:0 12px 12px 0;

text-align:center;
overflow:hidden;
}

<div id="topFloats" style="margin-top:5px; overflow:hidden; border:1px solid black; margin-top: 10px;">
    <div style="width:20px; height:340px; float:left; background-color:red;"></div>
    <div id="rightFloatWrapper" class="linksBox">
        <div class="rollover linkIconLayout" id="" style='width: 134px; height: 122px; background-color:green;' href=""></div>
        <div class="rollover linkIconLayout" id="" style='width: 142px; height: 112px; background-color:blue;' href=""</div>
    </div>
</div>

红色（左侧）浮动 div 中的图像设置黑色边框 div 的高度。我需要一个内部（阴影）div（其最小尺寸由其内容 div 的大小设置）来扩展以填充黑色边框 div 中的剩余空间。

我能够通过从阴影 div 中取出浮动、添加溢出并设置边距以适应阴影来填充水平空间。如何填充剩余的垂直空间？

【问题讨论】：

您可以查看flexbox。否则你可能不得不使用设置宽度或 javascript
谢谢@zach！我需要支持 IE 9，所以我想我必须使用 JavaScript。虽然可能有一种方法可以使用纯 CSS。

标签： html css css-float fill-parent

【解决方案1】：

解决了。我ended up 放弃浮动并在内部（阴影）div 上使用position:absolute;right:0; bottom:0;top:0;。诀窍是使用right:5% 并将（以前浮动的）红色div 宽度设置为相同（width:5%）。这完成了我试图用浮动 div 做的事情，并且仍然保持了流动布局的灵活性（有一个小缺点，如果我改变宽度，我需要确保也改变 right:property）。

希望这会帮助其他尝试此操作的人。

干杯！

【讨论】：