Полная высота div

Question

Я хотел бы знать, есть ли способ создать полную высоту div с css.

Я пробовал абсолютное позиционирование, но это не так гибко, как хотелось бы, но это мой текущий метод.

Ящики для гибких дисков не являются вариантом из-за соображений совместимости.

.line{ 
    background-image: linear-gradient(red 0%, blue 100%); 
    width: 1px; 
    margin-right: -1px; 
    float: left; 
    height: 100px; /*Fixed height at the moment*/ 
} 

JS Fiddle example

---

Вот текущий метод я использую: абсолютное позиционирование.

Не каждая ширина коробки подходит для бутстрапа. (Я на самом деле есть один для каждого седловине в начальной загрузки)

.line{ 
    background-image: linear-gradient(red 0%, blue 100%); 
    width: 1px; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 33.33333%; 
} 

Current Method JS Fiddle

Answer 1

Вы можете использовать vh (текущий видовой экран)

CSS

.line{ 
    background-image: linear-gradient(red 0%, blue 100%); 
    width: 1px; 
    margin-right: -1px; 
    float: left; 
    height: 80vh; /*Full screen Height*/ 
} 

DEMO HERE

Answer 2

Я не уверен, что понял вашу проблему, но попробуйте следующий код?

.content{ 
    background-color: red; // color was for the test 
    height: 100%; 
    padding: 3px; 
} 

Answer 3

body { margin:0; /* This is used to reset any browser-default margins */ } 

div { 
    height:100vh; 
    background:#f00; 
    color:#fff; 
} 

Это применяется к сНу надеюсь, что это помогает ..

Answer 4

.Строка должна быть полная высота контейнера, а не фиксированной высоты. Это в основном все. Я отредактирую свой пост с рабочим примером. - AlexG 5 мая в 9:26

Ваш текущий метод абсолютного позиционирования уже делает это. .line - 100% от высоты .row. Я думаю, вы просите высоты .line, чтобы взять полную высоту .panel-body. Если это правильное предположение, вам просто нужно переместить position:relative; от .row до .panel-body (См. Фрагмент).

Отрывок

.panel-body { 
 
    position:relative; 
 
    } 
 

 
.line1{ 
 
    background-image: linear-gradient(red 0%, blue 100%); 
 
    width: 1px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 33.33333%; 
 
} 
 
.line2{ 
 
    background-image: linear-gradient(red 0%, blue 100%); 
 
    width: 1px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 66.66666%; 
 
} 
 
.content{ 
 
    background-color: #EDFBFF; 
 
    height: 100px; 
 
    padding: 3px; 
 
} 
 
.container{ 
 
    margin-top: 20px; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
      <h3 class="panel-title">Full height div</h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
      <div class="row"> 
 
       <div class="col-xs-4"> 
 
        <div class="content" style="height: 150px;">line should fill 100% of the height automatically</div> 
 
       </div> 
 
       <div class="line1"></div> 
 
       <div class="col-xs-4"> 
 
        <div class="content" style="height: 200px;">absolute positioning is unpractical, but my current solution with "left: 50%;" for example. </div> 
 
       </div> 
 
       <div class="line2"></div> 
 
       <div class="col-xs-4"> 
 
        <div class="content" style="height: 300px;">flex is also not an option for compatibility reasons</div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>