ヘッダーとフッターの間のダイナミックHTMLコンテナ

Question

私はhtml構造を変換し、ナビゲーションの高さは常にコンテンツの高さに応じて動的に拡大するようにしたいと考えています。簡単な説明は次のとおりです。左にフッターと緑色のナビゲーションの間に隙間があってはいけません。

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/