CSS for displaying empty div - css

Question

I have a JSF template with three important components:
template.xhtml:
<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>
The mainStripe always has some content. The leftStripe might have something in it, but doesn't have to (e.g. in the index.xhtml). But even if it's empty, I want it to be on the page and to "occupy" the leftmost 15% of the page, so the mainStripe could be positioned in the center.
Unfortunately, the leftStripe doesn't show when it's empty.
It will be shown (even in index.xhtml) if I put the fixed height (e.g. 100px) instead of 100%, but I would really like it to fill the whole height of the page. Is there any way to do that?
I have tried the following:
.leftStripe{width:15%; float:left; height:100%;}
.leftStripe:empty{height:100px;}
...but it doesn't work.

Answer 1

If the leftStripe is Empty you could try to print a so it has at least a space as content.
EDIT: Since the clarification. Add the to the template, so if it's not overwritten, it contains only the space, and when it's overwritten, you probably have content.
SO:
template.xhtml:
<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>