Как настроить отзывчивую высоту DIV в Bootstrap 3 Мой код прикреплен?

Question

У меня проблема с установкой отзывчивой высоты div внутри строки начальной загрузки.

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