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

Question

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

在代码中，我有 Bootstrap 行，其样式具有背景色。在行内我有全宽“col xs 12”的div。在这个 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>