如何在引导程序中获取窗口的高度和宽度

Posted 2023-03-05

【中文标题】如何在引导程序中获取窗口的高度和宽度

【英文标题】：How to get the height and width of window in bootstrap

【发布时间】：2015-10-31 05:24:30

【问题描述】：

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

【问题讨论】：

你能显示一些代码吗？我猜你的元素在 div 中？

使用 Jquery 并使用 $(document).height() -（顶部导航栏的高度）-（底部导航栏的高度）。

除了给他整个文档的高度。据我了解，他只需要在这两个元素之间..

【参考方案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');​​​

【讨论】：

嗨，朋友，这是一个 jqurey 代码。如果你正在使用 jquery，你可以试试这个。

如果可以，也添加非 jQuery 代码。这将使这是一个特殊的答案

【参考方案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 填充和边距，这将很好，如果不是，也可以获取该值并在应用到 img 高度之前从 height_of_open_space 中减去

【参考方案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%，减去顶部和底部栏的高度。如果您希望我进一步解释，请告诉我。