10

行の中に 3 つの列があります。3 つの列すべてを同じ高さにしたい (空白全体を埋める)

現在、次のようになっています。

ここに画像の説明を入力

ご覧のとおり、左側の列が正しい高さです。真ん中と右がないところ。

その足場は次のようになります。

<div class="container">
    <div class="row">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
    </div>
</div>

中央と右のスパンの高さを 100% にしようとしましたが、そうはなりません。誰かが私を正しい方向に導くことができますか?

Twitter Bootstrap の最新バージョンを使用しています

4

4 に答える 4

12

これはJSなしで解決できます。使うだけ

bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */

それは魔法を行います:)

私が作った例: http://fiddle.jshell.net/E8SK6/1

結果: http://fiddle.jshell.net/E8SK6/1/show/

編集：

コメントでメニューが常に最大であると述べたので、次の新しい例を使用できます: http://fiddle.jshell.net/E8SK6/5/

どれが一番長いかわからない場合は、このスレッドの回答の方が良いかもしれません。display: table-cell を使用します。ここに例があります

于 2013-08-14T09:12:36.443 に答える
2

ああ、これは昔からの問題です。

要素に 100% の高さを設定する場合、その親には高さが設定されている必要があります。div.row には流動的な高さがあるため、機能しません。

これを回避する方法は次のとおりです。

に固定の高さを設定しますdiv.row(流動的なデザインが必要な場合は、おそらく良い考えではありません)。

また

jQuery を使用してそれを行います。

HTML

<div class="row equalHeight">
    <div class="span3">
      -- menu --
    </div>
    <div class="span5">
     -- gray content --
    </div>
    <div class="span3">
     -- black content--
    </div>
</div>

jQuery

$('.equalHeight').each(function() {
  var eHeight = $(this).innerHeight();

  $(this).find('div').outerHeight(eHeight);
});
于 2013-08-14T09:07:25.533 に答える