0

私は剣道UIとboostrap v3を使用しています。

ここに画像の説明を入力

トップ メニュー用のコンテナとメイン コンテンツ用のコンテナ ( id=splitter ) があります。

ウィンドウの高さは981pxですが、両方のコンテナーの高さを分割する代わりに、メイン コンテンツが981pxを予約し、トップ メニューが53pxを予約し、合計すると1014pxになります。

ただし、次の割り当てが必要です->トップメニュー用に53px 、メインコンテンツ用に928px。私はそれを行う方法がわかりません。

"calc(100% - 53px)"で高さを計算しようとしましたが、うまくいきません。

これは私のhtml構造です:

<div id="wms-app" style="height: 100%;">
    <div style="height: 100%;">
        <div id="wms-content" style="height: 100%;">
            <div id="mainmenu" class="k-content"></div>
            <div id="splitter" class="k-content" style="height: 100%;"> 
            </div>
        </div>
    </div>
</div>

解決：

最後に、 calc(..) オプションでも機能しました。

#splitter {style="height: calc(100% - 53px);"}

ページがロードされた後に剣道フレームワークがスプリッターの高さを再計算するため、すべてをリロードするのを忘れていました。

4

2 に答える 2

1

すでにご存知かもしれませんが、

100% の高さは、高さの使用可能なすべてのピクセルを占めるように要素を設定するため、動作は正しいです。

あなたが好む最終結果と方法に応じて、3つの解決策があります。

1 つの解決策は、トップメニューを

position: fixed;
top: 0;

これにより、メニュー フローが 100% コンテンツの上に表示されます。次に、メニューを説明する方法で 内にコンテンツを配置する必要がありdivます。

2 番目の解決策は、topmenu を に設定することです。これによりposition:absolute、これもフローから除外されますが、スクロールしても所定の位置に留まります。

3番目の解決策はこのようなもので、うまくいくはずですが、自分でテストしていません。

#topmenu
{
    height: 53px;
}
div
{
    height: 100%;
    margin-bottom: -53px;
}
于 2015-03-04T08:58:18.657 に答える