Динамический контейнер HTML между верхним и нижним колонтитулом

Question

Я хотел бы преобразовать структуру html и css, что высота навигации всегда динамически увеличивается в зависимости от высоты содержимого. Коротким объяснением будет: не должно быть никакого промежутка между нижним колонтитулом и зеленой навигацией слева.

http://letpack.lukasoppler.ch/

Может кто-нибудь дать мне несколько советов?

Answer 1

Вы можете использовать javascript для динамического получения высоты правой секции, а затем назначить ту же самую высоту своей зеленой навигации слева.

$(document).ready(function(){ 
    var h = $('.content').height(); 
    $('ul#nav').height(h + 18) 
}); 

Приведенный выше код будет работать на вашей странице

Answer 2

Попробуйте этот код

$(function(){ 
 

 
\t setHeight(); 
 
    
 
\t $(window).resize(function(){ 
 
    \t setHeight(); 
 
    }); 
 
\t 
 
    function setHeight(){ 
 
    \t $("#nav").css("min-height", $(".content").height()); 
 
    } 
 
});

.img{height: 50px;width: 100%;background: blue;} 
 
#nav{width: 25%;float: left;background: red;height: 100%;} 
 
.content{width: 75%;float: left;} 
 
.footer{background: green;clear: both;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
<div class="img"> 
 

 
</div> 
 
<div id="nav"> 
 

 
In unserem Betrieb leben wir gemeinsame Werte, denn wir stellen den Menschen und seine 
 
</div> 
 
<div class="content"> 
 
Willkommen 
 
Wir sind eine Organisation, die Menschen mit einer psychischen Erkrankung beschäftigt und begleitet. 
 
Entwicklungen in den Mittelpunkt und wachsen gemeinsam. 
 

 
Aktuell 
 
Ab dem 29. Oktober bis 15. November 2016 verkaufen wir unsere kunsthandwerklichen Produkte auf dem Petersplatz. Wir freuen uns auf Ihren Besuch! 
 

 
Betriebsferien: 
 
Vom 23. Dezember 2016 bis 1. Januar 2017 ist unsere Institution geschlossen. 
 

 
</div> 
 
</div> 
 
<div class="footer"> 
 
footer content 
 
</div>

Демо здесь https://jsfiddle.net/mv72L22g/