Как сделать столбец полной высоты страницы

-2

Мне интересно, как я могу сделать столбец в бутстрапе, чтобы быть полной высоты страницы, несмотря ни на что. В настоящее время я пытался сделать 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>

Это пример того, что я пробовал. Все, чего я хочу достичь, - установить весь столбец на всю высоту страницы. В настоящее время он блокируется до высоты содержимого. Есть ли способ обойти это?

источник

2016-06-01 Walter White

Возможный дубликат [Twitter бутстрапе 3 две колонки полная высота] (http://stackoverflow.com/questions/19089384/twitter-bootstrap-3-two-columns- полная высота) –

Одна вещь, которую вы можете сразу задать (не связанная с вашим вопросом), заключается в том, что вы не обращаете внимания на правила сетки. По умолчанию сетка составляет 12 столбцов, поэтому вам нужно использовать 'col-lg-4', чтобы разделить ее на 3 – Jonathan

. Это плохо для копирования и вставки, я использовал 3 a 6 и еще 3 –

Вам нужно будет использовать 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>

источник

2016-06-01 18:24:41 DMort

Как сделать столбец полной высоты страницы

ответ

Смежные вопросы