将变量传递到jQuery CSS值以计算高度 [英] Pass variable into jQuery CSS value to calculate height

查看:95
本文介绍了将变量传递到jQuery CSS值以计算高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我非常需要将此DIV的两个"高度设置为100%-(减)另一个DIV高度(div一个").问题是,另一个DIV(div"one")的高度已经是动态的.

I desprately need to set this DIV "two" height to be calculated as 100% - (minus) another DIV height (div "one"). The thing is, the height of that another DIV (div "one") is dynamic already.

所以:

<body>
<div id="one"></div>
<div id="two"></div>
</body>

div { position: relative; }
body { height: 100vh; }

我尝试了类似的方法,但这不起作用:

I tried things like these, but that doesn't work:

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    $('#two').css("height", "calc(100% - topHeight)")
}

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    var topHeightCalc = '100%' - topHeight;
    $('#two').css("height", topHeightCalc)
}

推荐答案

朋友,您也可以不用使用calc()函数就可以实现所需的功能.

Hey friend you can also achieve what you want without using the calc() function.

这将获取窗口的高度并从中扣除div #one的高度,并将该高度应用于div #two.

This gets height of the window and deduct height of the div #one from that and apply that height to div #two.

$(document).ready(exe);
$(window).resize(exe);

function exe(){
    var topHeight = $('#one').outerHeight(true);
    var vhHeight = $(window).outerHeight(true);
    $('#two').css("height", vhHeight - topHeight + "px");
}

这篇关于将变量传递到jQuery CSS值以计算高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆