1

ポートレットが配置される 1 つの列に 4 つの行を持つ Liferay 6.2 レイアウトを作成しました。レイアウトは正しく表示されますが、問題は、15%、25%、30%、30% のように 4 つの行の高さが 100% になるようにする必要があることです。このレイアウトをどこで使用しても汎用的にできるように、レイアウト側自体でこれを行うことはできますか

誰かその方法を教えてください

Bootstrap 2.3.2 を使用しています

私が達成しようとしているのは、以下に示すようなものです

ここに画像の説明を入力

私のliferayレイアウトコードは以下のとおりです

テンプレート.tpl

<div class="layout1template" id="main-content" role="main">
        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-1">
                $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-2">
                $processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-3">
                $processor.processColumn("column-3", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-4">
                $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
            </div>
        </div>
</div>

アップデート

テンプレート.tpl

<div class="layout1template" id="main-content" role="main">
        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-one" id="column-1">
                $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-two" id="column-2">
                $processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-three" id="column-3">
                $processor.processColumn("column-3", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-four" id="column-4">
                $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
            </div>
        </div>
</div>

CSS

#main-content {
  height: 100vh;
}

.row-one {
  height: 15%;
}

.row-two {
  height: 25%;
}

.row-three {
  height: 30%;
}

.row-four {
  height: 30%;
}
4

1 に答える 1

1

高さが定義されていない親を持つ行で高さを定義しています。高さは親に応じて機能します。したがって、html は次のようにする必要があります。

  <div class="layout1template" id="main-content" role="main">
        <div class="portlet-layout row-one">
    -------------------------------^^^^^^^
            <div class="portlet-column portlet-column-only span12" id="column-1">
                $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
            </div>
        </div>
  </div>
于 2015-12-11T10:58:47.063 に答える