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(){

	setHeight();
  
	$(window).resize(function(){
  	setHeight();
  });
	
  function setHeight(){
  	$("#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/

页眉和页脚之间的动态HTML容器

2 个答案: