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

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

0 голосов
/ 31 декабря 2018

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

В коде у меня есть строка начальной загрузки со стилем, имеющим цвет фона.внутри строки у меня есть div полной ширины "col xs 12".Внутри этого div у меня есть div, содержащий метку управления формой

Я должен настроить эту строку так, чтобы цвет фона реагировал на то, что ее высота остается одинаковой на всех устройствах, как установить адаптивную высоту div и строки?

myкод, 

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

1 Ответ

0 голосов
/ 31 декабря 2018

Дайте высоту в 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>
...