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

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/查看它

Answer 2

为什么不把 body 设置为 100% 高度，然后像这样把 header 放在里面：

body {
  height: 100%;
  background-color: blue;
  padding-top: 100px 0 0;
  position: relative;
  margin: 0;
}

header {
  top: 0;
  position: absolute;
  height: 100px;
  background-color: red;
  width: 100%;
}

http://jsfiddle.net/91qwq6rn/