Как сделать divs высотой просмотра

Question

У меня 3 столбца в <div>. <div> для большинства столбцов не распространяется на максимальную высоту. Я хочу, чтобы она была максимальной высотой для браузера по умолчанию и когда я уменьшаю окно браузера (мобильная версия).

Вот код и CSS для правой колонки:

HTML:

<div class="col-xs-3"> 
<div class="column-right"> 

    <span class="filter-image-right"> 
     <img src="/img/clock_library-right.png" /> 
     <img src="/img/heart_library-right.png" /> 
     <img src="/img/handshake_library-right.png" /> 
     <img src="/img/lamp_library-right.png" /> 
    </span> 

    <div> 
    <h6 class="right-column-heading"><img src="/img/minus.png"/> Cleaning</h6> 

    </div> 
     <p> 
     The concept of cleaning makes little sense to young children. For preschoolers, 
     instructions like, "Put your toys away" are too vague or abstract. You need to 
     break things down for them. "Pick up all your blocks and put them in the bin." 
     "put your dolls on the bottom shelf." The specificity of these instructions is key. 
     "Clean your room!" is simply overwhelming. 
     </p> 

    <h6 class="right-column-heading">Make Bed</h6> 

     <p> 
     For a younger child; Focus on smoothing out sheets and blankets for a clear 
     playing/sitting surface. 
     </p> 

    <h6 class="right-column-heading">test</h6> 

     <p> 
     The concept of cleaning makes little sense to young children. For preschoolers, 
     instructions like, "Put your toys away" are too vague or abstract. You need to 
     break things down for them. "Pick up all your blocks and put them in the bin." 
     "put your dolls on the bottom shelf." The specificity of these instructions is key. 
     "Clean your room!" is simply overwhelming. 
     </p> 

    <h6 class="right-column-heading">test2</h6> 

     <p> 
     The concept of cleaning makes little sense to young children. For preschoolers, 
     instructions like, "Put your toys away" are too vague or abstract. You need to 
     break things down for them. "Pick up all your blocks and put them in the bin." 
     "put your dolls on the bottom shelf." The specificity of these instructions is key. 
     "Clean your room!" is simply overwhelming. 
     </p> 

</div> 

CSS:

.column-right { 

background-color: #d0d0d0; 
overflow-y: scroll; 
padding:10px; 
float: right; 
margin-right:-17px; 
max-height:570px; 
} 

Вот CSS основного DIV, что содержит все три столбца:

#content-content-library { 
background: white; 
-webkit-border-bottom-left-radius: 15px; 
-webkit-border-bottom-right-radius: 15px; 
-moz-border-radius-bottomleft: 15px; 
-moz-border-radius-bottomright: 15px; 
border-bottom-left-radius: 15px; 
border-bottom-right-radius: 15px; 
position: relative; 
overflow: hidden; 
} 

Я новичок в html и css, поэтому любая помощь приветствуется. Спасибо.

EDIT:

Я изменил CSS для правой колонки и теперь левый столбец.

.column-right { 
background-color: #d0d0d0; 
overflow-y: scroll; 
padding:10px; 
float: right; 
margin-right:-17px; 
height: 100vh; 
} 

.column-left { 
height: 100vh; 
} 

HTML для левой колонки:

<div class="col-xs-3"> 
    <div class="column-left"> 

      <div class="row"> 

        <div class="left-navigation-home"> 
         <img src="/img/home_library.png" /> 
         <span>Home</span> 

         <span class="test">1</span> 
         <img src="/img/side_arrow.png" height="15" width="15" /> 
        </div> 
      </div> 
    </div>   
</div> 

Answer 1

Удалить max-height заявления, что у вас есть на классе правой колонки и установить height: 100vh;.

Это даст вашей колонке определенную высоту и сделает ее такой, чтобы все они отображались одинаково.

Answer 2

Просто добавьте этот кусок кода и класс appy equal_div в столбец, который необходимо уравнять.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
    $(document).ready(function(){ 

    var highestBox = 0; 
     $('.equal_div').each(function(){ 
       if($(this).height() > highestBox){ 
       highestBox = $(this).height(); 
     } 
    });  
    $('.equal_div').height(highestBox); 

}); 
</script>