頁眉和頁腳之間的動態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/