如何使列整页高度

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>