CSS空列但仍然顯示

我想在我的模板中創建一個系統，如果我將內容放在「側邊欄」中，那麼邊欄將顯示並且主窗口內容將被適當地移動。如果側邊欄中沒有內容，則不會顯示。CSS空列但仍然顯示

<div id="newcontainer"> 
    <div id="content">    
     <div id="sidebar-left"> 
     {% block left_sidebar %} 
     {% endblock%} 
     </div> 
     <div id="sidebar-right"> 
     {% block right_sidebar %} 
     {% endblock%}    
     </div> 
     <div id="col-main"> 
     {% block content %} 
     {% endblock%} 
     </div> 
    </div> 
</div>

這是我在多大程度上與其他用戶的幫助了： JSFIDDLE LINK

然而，正如你可以看到我已經把沒有內容在左側列，但仍填充顯示出來！這是我不想要的，當側邊欄中沒有內容時，我希望它完全消失。我有什麼選擇呢？我不想把填充放在中間框上，因爲當沒有側邊欄時，我將留下中間框中的填充。

來源

2012-10-08 James Willson

*和從側邊欄本身取出填充？這樣如果沒有內容，就沒有保證金/填充。 –

好的，所以側邊欄用作包裝？我還發現設置「height：auto;」側邊欄上的作品，但這是一個bodge？ http://jsfiddle.net/aBbtN/54/ –

羅迪，你的回答實際上可能是我沒有想到的最合乎邏輯的。但是，我不能評論你這一刻，因爲它只是一個評論！ –

你可以給出一個相當現代的瀏覽器，使用:empty僞選擇針對那些空元素：

#sidebar-left:empty, 
#sidebar-right:empty { 
    padding: 0; 
    border-width: 0; 
}

JS Fiddle demo。

如果您使用元素（在本例中爲右列，使用p）將列中的文本包裝到列中以便可以使用CSS進行定位，則可以使用margin代替padding：

#sidebar-left p, 
#sidebar-right p { 
    margin: 0 10px; 
}

JS Fiddle demo。

另外，如果你將更多的造型給子元素就可以解決可視邊框以及（雖然這具有的父元素不能似乎是它的全部，指定的高度後果）：

#sidebar-left p, 
#sidebar-right p { 
    padding: 0 10px; 
    background-color: grey; 
    border: 0 solid #000; 
} 

#sidebar-right p { 
    border-left-width: 1px; 
} 

#sidebar-left p { 
    border-right-width: 1px; 
}

JS Fiddle demo。

來源

2012-10-08 16:35:03

這很酷。 – Rayshawn

謝謝大衛，但我比這個解決方案提供了更多的兼容性http://reference.sitepoint.com/css/pseudoclass-empty –

@JamesWillson：是的，它不幸有這個問題。此外，更新了一個稍微更多的跨瀏覽器兼容的方法（不幸處理剩餘的邊界）。 –