Wie wird der Rahmen ausgeblendet, wenn kein Inhalt vorhanden ist?

Question

Ich habe folgende Sidebar:

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

Dieses div hat einen Wrapper darin:

div.sphinxsidebarwrapper { 
    padding: 0; 

} 

ich so etwas wie folgt aussieht:

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

| -------- Inhaltsverzeichnis - -------- |

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

Das Problem, das ich habe, ist, dass, wenn dieses div leer wird, die Grenze so aussieht:

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

Also im Wesentlichen fällt die obere Grenze mit der unteren Grenze und die Grenze ist immer noch sichtbar.

Wie mache ich die Grenze für diesen Fall verschwinden.

Das Problem scheint zu sein, dass die Grenze eine Höhe zugeordnet hat. Also zum Div, der Inhalt ist nicht leer.

Answer 1

Wenn Sie div auf leer setzen, stellen Sie auch die Anzeige auf none.

display:none;

Answer 2

Sie können CSS3 Lösung oder JS Lösungen

CSS

ausblenden Element verwenden:

.sphinxsidebar:empty{ 
    display:none 
} 

oder nur Grenze entfernen:

.sphinxsidebar:empty{ 
    border: none; 
} 

JS: entfernen Element:

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

oder entfernen Grenzen:

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