侧边栏 div 没有填充 100% 的父级答案

【问题标题】：Sidebar div is not filling 100% of the parent侧边栏 div 没有填充 100% 的父级
【发布时间】：2011-03-27 20:07:46
【问题描述】：

我会尽力解释这一点。

首先，这是我的问题的模拟
http://img402.imageshack.us/img402/7370/problemfb.png

DIV A 和 DIV B 位于名为 contents 的 div 中。

这里是 CSS：

#contents { height: auto; border: 1px solid black; }  
#a { float: left; padding-left: 10px; padding-top: 10px; width: 587px; }  
#b { border-left: 1px solid black; float: right; height: 100%; width: 300px; }

DIV A 包含生成的页面内容。 DIV B 包含两个为页面提供工具的子 div。它们都是相同的，并且只设置了 150px 的高度。

问题在于，如模型所示，#b div 没有填充 100% 的 #contents。所以当生成的内容消耗 > 300px 时，分隔右栏的黑线不会绘制#contents 的整个垂直长度。

我正在使用

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

对于文档类型。

【问题讨论】：

你可以尝试设置 display: inline-block;在 #b 上。

标签： css layout html

【解决方案1】：

您需要使用faux background technique、CSS（可能与table-cell）或JavaScript。

我使用display: table 和display: table-cell 来做到这一点。

示例

CSS

#contents { display: table; }  

#a { width: 587px; }  

#b { display: table-cell; width: 300px; }

jsFiddle.

请注意，这将不起作用

【讨论】：