地图和TW Bootstrap Navbar 100％高度，无需滚动

Question

所以我已经完成了一些搜索，并尝试了我能找到的所有工作，但我似乎错过了一些东西。

尝试在不使用滚动条的情况下使地图展开导航栏的100％-50px。

请参阅此jsfiddle：http://jsfiddle.net/Fyf3e/

JS：

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

HTML：

<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>
<div id="map"></div>

的CSS：

html, body{
    height:100%;
}
body{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.navbar{
    margin-bottom:0;
}
#map{
    height:100%;
    min-width:100%;
    width:100%;
}

jsfiddle的设置方式会导致滚动条出现，地图底部的一部分会被切断。

我错过了什么？

Answer 1

这是一个有趣的，但我能够通过添加一个包装元素并按如下方式调整CSS来获得它：

.content{
    position: relative;
    height: inherit;
}

#map{
    min-width:100%;
    width:100%;
    top: 50px;
    bottom: 0;
    position: absolute;
}

更新了JSFiddle： http://jsfiddle.net/Fyf3e/2/