Question

在bootstrap中，我有一个固定的顶部导航栏和固定的底部导航栏。我想在这两个导航栏的空间之间的背景中显示一个大图像，我也想覆盖窗口的宽度。如何动态获取导航栏和窗口宽度之间的高度？窗口大小可能会根据设备而改变。所以我需要它动态

Answer 1

需要jquery：

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

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

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

或者，您可以检查data-role="page"元素的宽度以查找设备宽度（因为它设置为设备宽度的100％）：

var deviceWidth = 0;
$(window).bind('resize', function () {
    deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');

Answer 2

$(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';
    });

});

如果0px填充和余量，这将是正常的，如果不是也得到该值并在应用height_of_open_space高度之前从img减去

Answer 3

如果没有看到任何标记就很难说，但是纯css应该可行。我建立了一个非常基本的例子来证明： http://codepen.io/anon/pen/XbGJJO

HTML：

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

CSS：

.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);

这告诉您的内容至少占据垂直高度的100％，减去顶部和底部条的高度。如果您希望我进一步解释，请告诉我。

如何在bootstrap

3 个答案: