CSS顯示空div

Question

我有三個重要組件的JSF模板：
所引用：

<div class="leftStripe"> 
    <ui:insert name="leftStripe"></ui:insert> 
</div> 
<div class="mainStripe"> 
    <ui:insert name="mainStripe"></ui:insert>     
</div> 
<div class="rightStripe"> 
    <ui:insert name="rightStripe"></ui:insert> 
</div> 

的style.css：

.mainStripe{width:70%; float:left; margin: auto; min-height: 100%;} 
.leftStripe{width:15%; float:left; height:100%;} 
.rightStripe{width:14%; float:right; height:100%;} 

的index.xhtml ：

<ui:composition template="resources/templates/template.xhtml"> 
    <ui:define name="mainStripe"> 
    /* something useful... notice there's no leftStripe */ 
    </ui:define> 
</ui:composition> 

someOtherFile.xhtml：

<ui:composition template="resources/templates/template.xhtml"> 
    <ui:define name="leftStripe"> 
    /* something useful */ 
    </ui:define> 
    <ui:define name="mainStripe"> 
    /* something useful */ 
    </ui:define> 
</ui:composition> 

的mainStripe總有一些內容。該leftStripe可能有它的東西，但是沒有到（例如，在的index.xhtml）。但是，即使它是空的，我想這是在頁面上，並「佔領」頁面最左邊的15％，所以mainStripe可以位於中央。
不幸的是，它是空的leftStripe沒有顯示。
如果我把固定高度（例如100像素），而不是100％，但我真的很喜歡它來填充頁面的整個高度將顯示（甚至在的index.xhtml）。有沒有辦法做到這一點？

我曾嘗試以下：

.leftStripe{width:15%; float:left; height:100%;} 
.leftStripe:empty{height:100px;} 

...但它不工作。

Answer 1

如果leftStripe爲空，您可以嘗試打印 ，以便至少有一個空格作爲內容。

問候

編輯：自澄清。將 添加到模板，所以如果它沒有被覆蓋，它只包含空格，當它被覆蓋時，你可能有內容。

SO：

所引用：

<div class="leftStripe"> 
    <ui:insert name="leftStripe">&nbsp;</ui:insert> 
</div> 
<div class="mainStripe"> 
    <ui:insert name="mainStripe">&nbsp;</ui:insert>     
</div> 
<div class="rightStripe"> 
    <ui:insert name="rightStripe">&nbsp;</ui:insert> 
</div>