Question

我有一个包含3列的表格，第一列和第三列由一条垂直线划分，我使用的表格具有100％的高度和背景颜色，在FF中工作正常但在Chrome或IE中不起作用。

现在我用div标签替换表，但是没有显示空div。下面是我尝试了很多东西的示例代码现在我很困惑使用什么。需要CSS Gurus的帮助。

 .PageLine2V
    {
        width:2px;
        content: "";
        min-height: 100%;
        background-color:#D1C094;
        background-image:url('../images/gold-line-2v.gif'); 
        background-repeat:repeat-y;
    }
<table height="100%">
        <td width="60px" valign="top" align="center" >
         <div class="PageLine2V"></div>
        </td>
</table>

我不知道我怎么能让这个空的div显示出来并且随桌面高度增长

Answer 1

 .PageLine2V
    {
        width:2px;
        content: "";
        min-height: 100%;
        background-color:#D1C094;
        background-image:url('../images/gold-line-2v.gif'); 
        background-repeat:repeat-y;
        height: 100%;

    }

给div高度100％

还要在div中添加一些内容，例如在没有内容的情况下不会呈现的空格。

<table height="100%">
        <td width="60px" valign="top" align="center" >
         <div class="PageLine2V">&nbsp;</div>
        </td>
</table>

Answer 2

将高度设置为100％要求父级具有明确定义的高度。将height: 100%添加到td（div的父级）。测试并使用jsfiddle。

Answer 3

.PageLine2V
{
    width:2px;
    content: "";
    min-height: 100%;
    background-color:#D1C094;
    background-image:url('../images/gold-line-2v.gif'); 
    background-repeat:repeat-y;
    height: 35px; /* As required */
    display:inline-block;

}

希望这会奏效。在我尝试的时候，我使用了相同的代码，其高度固定为像素，并添加了display:inline-block;。接下来，您可以尝试调整父高度参数以进一步定位。

Answer 4

给它一个位置：绝对; http://jsfiddle.net/eg6DP/

你可以在最左边看到它，当你在它的时候也可以给桌子一个位置。

2px宽度和背景颜色的空div不显示高度为100％

4 个答案: