Div должен содержать 100% высоту экрана

Question

На моей странице я определил три divs, оставил один с col-md-2, средний с col-md-8 и остался один с col-md-2. И я хочу, чтобы правый div должен принимать 100% высоту экрана, даже если никакого контроля нет. Я установил высоту и минимальную высоту до 100%, но она не работает. Мой код такой. Что мне нужно сделать, чтобы преодолеть это.

<div id="propertiesContainer" class="row col-md-2" style="border:solid 1px;padding-left:unset;padding-right:unset;min-height: 100%;height:100%;"></div>

Answer 1

Вы должны установить тело, HTML, контейнер, ряд до 100%, а также.

Обратите внимание, что div будет занимать 100% высоты (без содержания в нем), только если его родительский 100%.

html,body{ 
 
width:100%; 
 
height:100%; 
 
} 
 
.row div{ 
 
    height:100px; 
 
    background-color:red; 
 
} 
 
.row, .container{ 
 
    height:100%; 
 
} 
 
.row .right{ 
 
    height:100%; 
 
    background-color:green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-2"></div> 
 
     <div class="col-xs-8"></div> 
 
     <div class="col-xs-2 right"></div> 
 
    </div> 
 
</div>

Answer 2

Для того, чтобы установить height на 100% элемента высоты экрана каждый его родитель должен иметь 100%, а также.

Пример

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css); 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
.main { 
 
    height: 100%; 
 
} 
 

 
.main .side { 
 
    height: 100%; 
 
} 
 

 
/*/ Decoration /*/ 
 
body { 
 
    background-color: #ffeeff; 
 
} 
 

 
.main { 
 
    border: dashed 1px blue; 
 
} 
 

 
.main div { 
 
    border: dashed 1px red; 
 
}

<div class="container main"> 
 
    <div class="col-xs-2"> 
 
    Left 
 
    </div> 
 
    <div class="col-xs-8"> 
 
    Center 
 
    </div> 
 
    <div class="col-xs-2 side"> 
 
    Right 
 
    </div> 
 
</div>

Answer 3

<div class="a-class"> 
</div> 

CSS

.a-class{ 
    min-height: 100vh; 
} 

or 
.a-class{ 
    height: 100vh; 
} 

Answer 4

Введите код на скрипку, то может быть ниже кода поможет вам!

.lastdiv{ 
    position:absolute; 
    display:block; 
    height:100%; 
    background: #ccc; 
    right:0; 
} 

html, body{ 
    height:100%; 
}