如何设置响应高度的DIV在引导3我的代码附加？

Question

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

在代码中，我有引导行，样式有背景色。在第一行内，有一个全宽的div“col xs 12”。在这个div中，我有一个包含表单控件标签的div

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

我的密码是，

.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;
}

html prettyprint-override"><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>