2

通常の Bootstrap 3 CSS セットアップがあります。行内の列に同じ高さを適用したいので、 and の使用を検討していdisplay:tableますdisplay:table-cell。この方法は機能しますが、コンテンツの少ない列に垂直方向のパディングを自然に適用するようです。

たとえば、次の HTML を使用します。

<div class="row">
    <div class="col-xs-4">
        <div class="block">
            Content for block<br />
            Some more content<br />
            And a bit more<br />
            Last bit
        </div>
    </div>
    <div class="col-xs-8">
        <div class="block">
            Content for block<br />
            Only some more content
        </div>
    </div>
</div>

次に、この CSS:

.row { 
  display: table;
  width: 100%; }

.row > div {
  float: none;
  display: table-cell;
  vertical-align: top; }

.block { 
  height: 100%;
  background: red; }

現在、列の高さは同じですが.block、2番目の列には削除できない下部パディングが適用されているため、赤い背景を持つ はこれを反映していません。

例については、このフィドルを参照してください: http://jsfiddle.net/cyan8fjz/

.block完全に使用するための解決策はありheight:100%ますか? .block理想的には、列の左右のパディング (異なる画面解像度で変更される可能性がある)のため、絶対に配置したくありません。

上記の例には Bootstrap CSS を含めていませんが、フィドルには含めていることに注意してください。関連性があり、すべての例に含まれていると仮定します。

4

1 に答える 1

2

この 'padding-bottom: 1000em; margin-bottom: -1000em;トリックのように使用できます。

以下に例を示します:リンク

于 2014-10-01T16:29:28.207 に答える