javascript - 100% 高度减去 nPx 通过 css 或 jquery

Question

我试图根据浏览器窗口大小使我的主要内容 div 100% 高度，但我希望它在标题之后开始。我得到 100% 的高度，但它是从顶部开始的，但我希望它会离开标题，然后它会达到 100% 的高度。下面是代码。

主要是我想让我的 contentarea div 覆盖 100% 的宽度和高度，但减号将是 header 高度

<style>
* {
    margin: 0;
    padding: 0
}
body {
    background-color: #F90;
}
header {
    width: 100%;
    float: left;
    height: 100px;
    background-color: #36F;
    border-bottom: solid 2px #FF3300;
    opacity: 0.3;
    z-index: 5;
}
.contentarea {
    background-color: #396;

    z-index: 2;

}
</style>

<script>
jQuery(function($){

    //Fix height of the slider wraper
    $(window).on('resize', function(){

        var h = $(this).height() - $('header').height();
        if(h<=200) h=200
        $('#home').height(h); 


    }).trigger('resize');
});
</script>


<header>
  <div class="companyname"> sdf </div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Space Available</a></li>
      <li><a href="#">Parking / Amenities</a></li>
    </ul>
  </div>
</header>
<div class="contentarea" id="home">adasdasdasdas
  adsada

  dasdasdas
  <div class="footer">copy right</div>
</div>

演示 http://jsfiddle.net/o0Lcrv3w/

我已经在这里搜索了一些并得到了很多解决方案，很多帖子我都尝试过但还没有真正起作用。

喜欢

height: -o-calc(100% - 100px); /* opera */
height: -webkit-calc(100% - 100px); /* google, safari */
height: -moz-calc(100% - 100px); /* firefox */

Answer 1

将内容区域类更新为:

.contentarea {
background-color: #396;position:relative; z-index:2;
top:100px;bottom:0px;}

可以在http://jsfiddle.net/o0Lcrv3w/2/查看