jquery - 使用jQuery动态定义div的高度

Question

我正在使用 Bootstrap、idangero.us swiper 和 Leaflet.js 开发一个 Web 应用程序。我在顶部有一个导航栏（50px），在下面有一个 id="swiper-area"，它应该采用“高度：100% - 导航栏的高度”。我正在使用 CSS 执行此操作：

#swiper-area {
height: calc (100% - 50px);
position: absolute;
top: 50px;
}

这在桌面浏览器中运行良好。但是大多数移动浏览器（尤其是 Android）无法解释 CSS calc，这弄乱了我的地图。

如何使用 jQuery 实现这种行为？谢谢你的任何建议。

score 1 · Accepted Answer

100% 是某事的 100%。但是什么？您的元素的父节点。

因此，您首先要细化元素的父级高度：

$("#swiper-area").parent().height()

然后减去 50 并将其设置为你的元素高度。

在一行中，它将是：

$("#swiper-area").height( $("#swiper-area").parent().height()-50);

score 0 · Accepted Answer

您可以通过.css在 jQuery 中使用来做到这一点，检查以下代码

jQuery(document).ready(function(){
   var main=jQuery("#swiper-area").height();
   var res=main-50;
  jQuery(".your_class").css("height",res)
 });

你也可以通过使用媒体查询来做到这一点

2 回答 2