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 ）。但即使它是空的，我也希望它在页面上并且占据＆＃34;页面最左边的15％，因此 mainStripe 可以位于中心。
不幸的是， leftStripe 无法显示何时为空。
它将显示（即使在 index.xhtml ），如果我把固定高度（例如100px）而不是100％，但我真的希望它填充页面的整个高度。有没有办法做到这一点？

我尝试过以下方法：

.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>

用于显示空div的CSS

1 个答案: