Question

我会尽力解释这个。

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

DIV A和DIV B位于名为内容的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。因此，当生成的内容消耗＆gt; 300px，分隔右边栏的黑线不会绘制#contents的整个垂直长度。

我正在使用

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

对于doctype。

Answer 1

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

我使用display: table和display: table-cell来执行此操作。

实施例

Example

CSS

#contents { display: table; }  

#a { width: 587px; }  

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

jsFiddle

请注意，这不起作用＆lt; IE8。

边栏div不会填充100％的父级

1 个答案:

实施例

CSS