宽度为 2px 且背景色的空 div 在高度为 100% 时不显示

发布于 2025-01-02 16:07:03 字数 639 浏览 0 评论 0原文

我有一个包含 3 列的表格，第一列和第三列被一条垂直线分隔，我使用了具有 100% 高度和背景颜色的表格，该表格在 FF 中运行良好，但在 Chrome 或 IE 中不起作用。

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

 .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 显示出来并随着表格高度的增加而增长

原文

I have a table with 3 columns and first and third column are divided by a vertical line for which i used table with with 100% height and background color which works in fine in FF but doesn't work in Chrome or IE.

Now i replace the table with div tag but empty div doesn't show up. Below is the sample code i tried so many thing now i am confused what to use. Need help from 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>

I am not sure how i can make this empty div show up and grow with table height also

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倥絔 2025-01-09 16:07:03

 .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"> </div>
        </td>
</table>

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

    }

Give the div a height of 100%

Also add something in the div such as a space it won't render without content.

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

回复收藏 0 原文

勿忘初心 2025-01-09 16:07:03

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

回复收藏 0 原文

眸中客 2025-01-09 16:07:03

.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;。接下来可以尝试调整父高度参数来进一步定位。

.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;

}

Hope this will work. As I tried, I've used the same code with a fixed height in pixels and added display:inline-block;. Next you may try adjusting the parent height parameters for further positioning.

回复收藏 0 原文