Сделать загружаемое содержимое занимает оставшуюся высоту

Question

У меня есть количество столбцов, и при каждом щелчке по столбцу содержимое этого столбца показано ниже. Как я могу заставить отображаемый контент занимать оставшуюся высоту, когда она видна, чтобы макет был отзывчивым? Можно ли использовать только css или мне нужно использовать js?

$(document).ready(function() { 
 
    $('.column').on('click', function(e) { 
 
    $(this).find('.content').toggle(); 
 
    $(this).toggleClass('active', 400); 
 
    }); 
 
});

#wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    color: #000; 
 
    left: 0; 
 
    top: auto; 
 
    display: none; 
 
    text-align: left; 
 
    border: 1px solid #000; 
 
} 
 

 
.column { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
} 
 

 
.column.active { 
 
    margin-bottom: 100px; 
 
} 
 

 
.toggle { 
 
    width: 25%; 
 
    height: 64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="column"> 
 
    <div class="toggle">1</div> 
 
    <div class="content"> 
 
     <p>content 1</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">2</div> 
 
    <div class="content"> 
 
     <p>content 2</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">3</div> 
 
    <div class="content"> 
 
     <p>content 3</p> 
 
    </div> 
 
    </div> 
 
</div>

Я создал fiddle того, что я сделал до сих пор.

Answer 1

если я правильно вас понимаю. Вы хотите создать своего рода аккорд. если у вас есть 4 вкладки. и открыть один, он отображает текст. и если вы нажмете еще один, то откроете его, закройте его и останетесь в его кеге.

Вам нужен javascript или jsfiddle или что-то в этом роде для этого, чтобы работать отлично.

так что если это была ваша проблема. google что-то вроде: «как сделать меню аккордеона». Могут быть способы сделать это чистым css, но я не уверен в этом.

извините, если это не ваша проблема

Answer 2

Это то, что вы хотите?

$(document).ready(function() { 
 
    $('.column').on('click', function(e) { 
 
    $(this).find('.content').toggle(); 
 
    $(this).toggleClass('active', 400); 
 
    }); 
 
});

#wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    color: #000; 
 
    left: 0; 
 
    top: auto; 
 
    display: none; 
 
    text-align: left; 
 
    border: 1px solid #000; 
 
    height: calc(100vh - 100px); 
 
} 
 

 
.column { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
} 
 

 
.column.active { 
 
    margin-bottom: 100px; 
 
} 
 

 
.toggle { 
 
    width: 25%; 
 
    height: 64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="column"> 
 
    <div class="toggle">1</div> 
 
    <div class="content"> 
 
     <p>content 1</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">2</div> 
 
    <div class="content"> 
 
     <p>content 2</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">3</div> 
 
    <div class="content"> 
 
     <p>content 3</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

• Чтобы получить доступное пространство вычесть высоту окна ($ (окно) .height()) от смещения колонки + высота колонны.
• Установите край нижней части активного столбца = доступное пространство (availSpace), чтобы сдвинуть вторую строку столбцов вниз.

EDIT: Если вы не хотите «.content», чтобы заполнить окно просмотра просто удалить вар (AvailSpace), чтобы найти свободное место, а затем установить высоту «.content» (myContent.height) к краю дна колонны

$(document).ready(function(){ 
 
    $('.column').on('click', function(){ 
 
    \t $("#wrapper").find (".column").css ({"margin-bottom": 0}); 
 
     $("#wrapper").find (".content").css ({"display": "none"}); 
 
     
 
     var myContent = $(this).find('.content'); 
 
     // var availSpace = $(window).height() - ($(this).offset().top + $(this).height()); 
 
     
 
    \t myContent.addClass('active'); 
 
     myContent.css ({"display": "inline-block"}); 
 
     $(this).css ({"margin-bottom": myContent.height()}); 
 
    \t }); 
 
});

#wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    color: #000; 
 
    left: 0; 
 
    top: auto; 
 
    display: none; 
 
    text-align: left; 
 
    border: 1px solid #000; 
 
} 
 

 
.column { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
} 
 

 

 
      
 
.toggle { 
 
    width: 25%; 
 
    height: 64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="column"> 
 
     <div class="toggle">1</div> 
 
     <div class="content">  
 
      <p>content 1</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">2</div> 
 
     <div class="content"> 
 
      <p>content 2<br> 
 
      content 2</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">3</div> 
 
     <div class="content"> 
 
      <p>content 3</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">4</div> 
 
     <div class="content"> 
 
      <p>content 4</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">5</div> 
 
     <div class="content"> 
 
      <p>content 5</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">6</div> 
 
     <div class="content"> 
 
      <p>content 6</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">7</div> 
 
     <div class="content"> 
 
      <p>content 7</p> 
 
     </div> 
 
    </div> 
 
</div>