如何在Bootstrap 中设置DIV 的响应高度 3 附上我的代码？

Question

我在 bootstrap 行内设置 div 的响应高度时遇到问题。

在代码中，我有 bootstrap 行的样式具有背景色。内行我有 div 全宽 "col xs 12"。在这个 div 里面我有 div 包含表单控件标签

我必须调整此行，使背景颜色响应它的高度在所有设备中保持不变如何设置 div 和行的响应高度？

我的代码是，

.big-box,
.mini-box {
    background-color: none;
    color: white;
    text-align: center;
    margin: 2px;
    font-size: 1.5em;
}

.big-box {
    height: 69px;
    line-height: 68px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
 <div class="row" style="background-image: linear-gradient(to bottom, #00a896, #2d6f84);">
     <div class="col-xs-12">
         <div class="big-box">
             <div class="name">
                 <asp:Label runat="server" ID="lblFullNameArabic"></asp:Label>
       </div>  
      </div>
     </div>
    </div>
</div>

Answer 1

以 vh 格式给出整个页面大小的高度，例如 100vh

.big-box,
.mini-box {
    background-color: none;
    color: white;
    text-align: center;
    font-size: 1.5em;
}

.big-box {
    height: 100vh;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
 <div class="row" style="background-image: linear-gradient(to bottom, #00a896, #2d6f84);">
     <div class="col-xs-12">
         <div class="big-box">
             <div class="name">
                 <asp:Label runat="server" ID="lblFullNameArabic"></asp:Label>
       </div>  
      </div>
     </div>
    </div>
</div>

如何在Bootstrap 中设置DIV 的响应高度 3 附上我的代码？

How to Set Responsive Height of DIV in Bootstrap 3 My code attached?

html

css

twitter-bootstrap-3

form-control