在容器 div 内定位地图框/传单地图

I am working with Mapbox in a Ruby on Rails app. For the life of me, I cannot get the map to adhere to any simple CSS. The only CSS that allows the map to appear is giving it an absolute position with a top and bottom of 0. Altering anything other than the height and width causes the map to disappear. I want to have the map centered inside a container div. Here is the code:

<div id="map-container">
  <div id='map'>
  </div>
</div>

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiYWxvb2thdG9tbW9yb3ciLCJhIjoiNGM4ODhkZjUwMGM1ZDE4M2VjNzQ4MmQ4ODcxMjk5ZjMifQ.XVvFc8kl-0z4NAblE-mNqw';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 10);

</script>

还有以下 CSS:

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 50%;
  width: 50%;
}

如果我改变任何东西，地图就会消失.我试图给地图容器 div 一个相对的位置.那是行不通的.我想要的只是将地图包含在一个 div 中，这似乎并不难.2013年有一篇关于这个的帖子，但它已经过时了.感谢您的帮助.

#map {
    height: 200px;
}

#html, #body, #map-container {
    height: 100%;
}

#map {
    height: 40%;
}