动态 height() with window resize() with variable margin

Question

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

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

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

这很有魅力。如您所见，有 110 像素的边距（属于我的 header 高度）。

此代码不是最佳代码，因为 header 高度可能会因当前视口而异。

有没有办法动态设置它？或者至少设置一些条件，例如：

如果浏览器宽度超过 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 不是边距，而是我为了让我的 header 和幻灯片填满整个 window 而做的减法。如果我不做这个减法，那么我最终会得到我的 header 高度 + 幻灯片高度（需要浏览器高度）使其滚动。

所以我认为我无法用 CSS 做到这一点。这就是为什么我在考虑 Javascript 解决方案。

Answer 1

你可以这样做：

$(window).resize(function() {
    var buffer = ($(window).width()<768)?80:110;
    $('#slideshow').height($(window).height() - buffer );
});

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

正如 Halcyon 在评论中建议的那样，使用 css。这是最巧妙的方法。

Answer 2

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

$(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>

动态 height() with window resize() with variable margin

Dynamic height() with window resize() with variable margin

javascript

jquery

window-resize