Wie man eine Spalte volle Seitenhöhe macht

Question

Ich frage mich, wie ich eine Spalte im Bootstrap machen kann, um volle Seitenhöhe egal was. Ich habe gerade versucht, einen id zu machen und die Höhe auf 100% zu setzen, aber ich hatte kein Glück.

<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> 

Dies ist ein Beispiel dafür, was ich versucht habe. Alles, was ich erreichen möchte, ist, die gesamte Spalte auf die gesamte Höhe der Seite zu setzen. Es wird derzeit auf die Inhaltshöhe beschränkt. Gibt es einen Weg dazu?

Answer 1

Sie müssen CSS verwenden, um die Höhe festzulegen.

Zuerst müssen Sie Ihren Körper zu 100% sein. Dann würde ich die Spalten in ein containing div setzen und das auf 100% setzen (sieht aus wie main-row ist das enthaltende div). Wenn Sie nur Spalten auswählen möchten, die auf die volle Höhe erweitert werden sollen, geben Sie ihnen eine Klasse mit 100% als Höhe.

Sie können versuchen, die CSS auf diese zu setzen.

.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>