Javascript 如何在bootstrap中获取窗口的高度和宽度

在引导中，我有一个固定的顶部导航条和固定的底部导航条。我想在两个导航条之间的背景中显示一个大图像，我还想覆盖窗口的宽度。如何动态获取导航栏之间的高度和窗口的宽度？窗口大小可能会根据设备的不同而变化。因此，我需要它动态需要jquery：

var viewport = {
    width  : $(window).width(),
    height : $(window).height()
};

//can access dimensions like this:
//viewport.height

虽然您不会总是得到完美的结果，但不同的设备表现不同，这会给出视口尺寸，而不是屏幕尺寸

或者，您可以检查

data role=“page”

元素的宽度以查找设备宽度（因为它设置为设备宽度的100%）：

---

在应用到

img

height

之前，如果没有看到任何标记，就很难判断，但使用纯css应该是可行的。我设置了一个非常基本的示例来演示：

HTML:

诀窍在于以下几行：

min-height: calc(100vh - 80px);

---

这告诉您的内容至少占据垂直高度的100%，减去顶部和底部栏的高度。如果你想让我进一步解释，请告诉我。

你能展示一些代码吗？我想你的元素就是div格式的？使用Jquery并使用$（document）.height（）-（顶部导航栏的高度）-（底部导航栏的高度）。除了这给了他整个文档的高度。据我所知，他只需要介于这两个元素之间..嗨，朋友，这是一个jqurey代码。如果您正在使用jquery，您可以尝试这个方法。如果可以，还可以添加非jquery代码。这将使这成为一个例外的答案

$(window).resize(function() {
    var top_nav_height = $("#id_of_top_nav").height();
    var bottom_nav_height = $("#id_of_bottom_nav").height();  
    var window_height = $(window).height();

    var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);

    $("#id_of_img").css({
         height:height_of_open_space+'px';
    });

});

<div class='top'>
  top navbar
</div>
<div class='content'>
  <p> some content </p>
</div>
<div class='bottom'>
  bottom navbar
</div>

.top, .bottom {
  height: 40px;
  background: red;
  position: fixed;
  width: 100%;
}
.top {
  top: 0;
}
.bottom {
  bottom: 0;  
}

.content {
  margin: 40px 0;
  min-height: calc(100vh - 80px);
  background: green; /* background goes here */
}

min-height: calc(100vh - 80px);