Question

因此，如果有这个函数，以便根据浏览器高度动态设置div的高度：

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

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

这就像一个魅力。如您所见，有一个110px的边距（属于我的标题高度）。

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

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

如果浏览器宽度超过768px，则设置110px边距。如果小于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解决方案的原因。

Answer 1

因此，您需要以下内容。我希望代码很简单。

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

Answer 2

您可以这样做：

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

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

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

动态高度（），窗口调整大小（），可变边距

2 个答案: