列をフルページの高さにする方法

Question

ブートストラップの列をどのようにしてフルページの高さにすることができますか？私は現在、idを作り、高さを100％に設定しようとしましたが、運がなかった。

<div id="main-row" class="row"> 
<div id="left" class="col-lg-3"> 
    TEXT 
</div> 
<div id="center" class="col-lg-3"> 
    TEXT 
</div> 
<div id="right" class="col-lg-3"> 
    TEXT 
</div> 

これは私が試したものの一例です。達成したいのは、列全体をページの高さ全体に設定することだけです。現在、コンテンツの高さにロックされています。これを回避する方法はありますか？

Answer 1

高さを設定するには、CSSを使用する必要があります。

まず、身体を100％にする必要があります。それから私は、含まれているdivに列を配置し、それを100％に設定します（メイン行は包含divです）。次に、列を選択して完全な高さにする場合は、100％を高さに設定したクラスを与えます。

これにcssを設定してみてください。

.html, body { 
    height:100%; 
} 
#main-row { 
    height:100%; 
} 
.fullheightcol { 
    height: 100%; 
} 

HTML：

<div id="main-row" class="row"> 
    <div id="left" class="col-lg-3"> 
    TEXT 
    </div> 
    <div id="center" class="col-lg-6 fullheightcol"> 
     TEXT 
    </div> 
    <div id="right" class="col-lg-3"> 
     TEXT 
    </div> 
</div>