gpt4 book ai didi

javascript - 具有可变边距的窗口调整大小()的动态高度()

转载 作者:行者123 更新时间:2023-11-30 12:23:07 25 4
gpt4 key购买 nike

所以如果有这个功能以便根据浏览器高度动态设置div的高度:

$(window).resize(function() {
$('#slideshow').height($(window).height() - 110);
});

$(window).trigger('resize');

这就像一个魅力。如您所见,有 110 像素的边距(属于我的页眉高度)。

此代码不是最优的,因为标题高度可能会根据当前视口(viewport)而变化。

有没有办法动态设置它?或者至少设置一些条件,例如:

如果浏览器宽度超过 768 像素,则设置 110 像素的边距。如果小于 767,则边距应为 80px。

到目前为止,这是我编辑过的代码,但我不确定我是否走在正确的道路上:

$(window).resize(function() {

var set_width = $(window).width();
if(set_width <= 767)

$('#slideshow').height($(window).height() - 110);
});

$(window).trigger('resize');

非常感谢!

编辑:


现在我想得更好了,这个 110px 不是边距,而是我为了让页眉和幻灯片填满整个窗口而做的减法。如果我不做这个减法,那么我最终会得到我的标题高度 + 幻灯片高度(需要浏览器高度)使其滚动。

所以我认为我不能用 CSS 做到这一点。这就是我考虑 Javascript 解决方案的原因。

最佳答案

因此,您需要如下内容。我希望代码简单明了。

$(window).on("resize", function() {

var winHeight = $(window).height();
var headerHeight = $("header").height();
$('#slideshow').height(winHeight - headerHeight);
});

$(window).trigger('resize');

我用作模型的示例 HTML 是:

<body>
<header>my header</header>
<div id="slideshow"></div>
</body>

关于javascript - 具有可变边距的窗口调整大小()的动态高度(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30378885/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com