html - css: div height 灵活地到达屏幕底部有一些边距

Question

我正在尝试使用 Twitter Bootstrap 响应类构建一个两列页面:

<div class="container">
  <div class="row">
    <div id="left" class="col-xs-7">
      some article here
    </div>
    <div id="right" class="col-xs-5">
      google map here
    </div>
  </div>
</div>

左侧部分将包含一篇文章，该文章的长度可能足以超过屏幕高度，如果发生这种情况，它将有自己的滚动条。

在右边部分，我想把google map的高度达到屏幕底部上方一定的边距。

我已经尝试过视口(viewport)高度，但是当它在该部分上方有一个导航栏时，我希望高度是视口(viewport)减去导航栏的高度(例如:40px 加上一定的边距，比如下面的 10px):

#left {
  height: 100vh - (40px + 10px);
  overflow-y: auto;
}

#right {
  height: 100vh - (40px + 10px);
}

因此我只希望#left 有一个滚动条。有没有简单的方法可以做到这一点？

演示:http://jsfiddle.net/kw4qLrgr/1/

Answer 1

您可以通过 JS 通过调整 div.container 的大小和对您的 css 进行一些更新来完成。

<script>   

 $(document).ready(sizeContent);

    $(window).resize(sizeContent);

    function sizeContent() {
        var height = window.innerHeight - 90; //90 = The size of your header minus margins 
        $('.container').height(height);
    };

</script>


#left {
    overflow-y: auto;
    height: 100%;
}

#right {
    background-color: #ddd;
    height: 100%;
}

问候。