使用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计算，这会搞乱我的地图。

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

Answer 1

100％是100％的东西。 但是什么？您的元素父节点。

因此，您首先需要精确元素的父级高度：

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

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

在一行中它将是：

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

Answer 2

您可以在jQuery中使用.css来执行此操作，请检查以下代码

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

您也可以使用媒体查询

来完成此操作