没有内容时如何让边框消失？答案

【问题标题】：How to make border disappear when there is no content?没有内容时如何让边框消失？
【发布时间】：2016-08-03 08:11:11
【问题描述】：

我有以下侧边栏：

div.sphinxsidebar {
    margin: 0px 15px 0px 0;
    padding: 0;
    width: 210px;
    float: right;
    font-size: 1em;
    text-align: center;
    border: 0.2px solid #CCC;
    border-radius: 10px;
    background-color: #F7F7F7;
    }

这个 div 里面有一个包装器：

div.sphinxsidebarwrapper {
   padding: 0;

}

我看起来像这样：

----------------------------------------------------

|--------目录----------|

----------------------------------------------------

我遇到的问题是，当这个 div 变空时，边框看起来像这样：

----------------------------------------------------

所以本质上，上边框与下边框重合，并且边框仍然可见。

我如何使这种情况下的边框消失。

问题似乎是边框具有与之关联的高度。所以对于div，内容不为空。

【问题讨论】：

如果可以的话，您可以将边框应用到内部元素，这意味着将内容包装到另一个标签中。否则考虑使用后端语言或 javascript。
我建议你使用 display: table for div.sphinxsidebar 而不是保持边框不折叠，但如果你想让它消失，你应该使用 javascript 检查是否为空并将边框设置为无。
当我将边框放在包装上时，我也有同样的行为，不幸的是，:empty 由于某种原因对我不起作用。
即使空格也算不为空 - developer.mozilla.org/en-US/docs/Web/CSS/:empty
我很确定没有内容，因为我看到的只是一行

标签： html css height border

【解决方案1】：

当您将 div 设置为空时，也将显示设置为无。

display:none;

【讨论】：

您好，感谢您的回答。不幸的是，我无法访问控制 div 内容的代码。所以纯粹的 css 或 JS 解决方案似乎是唯一的选择
试试这个吧？ .sphinxsidebar:empty[style='height: 0px;']{ display: none; }
也不起作用，我认为原因是由于边界，div实际上有一个高度。
还有一个：.sphinxsidebar:empty[style*='height: 0px;']{ display: none; }

【解决方案2】：

你可以使用 CSS3 解决方案或 JS 解决方案

CSS

隐藏元素：

.sphinxsidebar:empty{
    display:none
}

或仅删除边框：

.sphinxsidebar:empty{
    border: none;
}

JS：移除元素：

$(document).ready(function() { $('.sphinxsidebar:empty').remove(); });

或删除边框：

$(document).ready(function() { $('.sphinxsidebar:empty').css({'border': 'none'}); });

【讨论】：

您好，谢谢您的回答，出于某种原因：empty 对我不起作用