动力高度（）的窗口大小调整（）与可变利润率

所以如果有这个功能，以动态地设置基于浏览器的高度div的高度：动力高度（）的窗口大小调整（）与可变利润率

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

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

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

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

有没有办法动态设置它呢？或者至少设置如下条件：

如果浏览器宽度大于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解决方案。

来源

2015-05-21 Johann

虽然这一切都不错，很好的实现这个在JavaScript中你认为实现使用媒体查询CSS中的反应？ – Halcyon

@Halcyon如果高度是动态的，我如何在CSS中实现这个功能？ – Johann

@Johann，媒体查询不会帮助你设置动态高度，做计算等。 – lshettyl

所以，你需要类似下面的东西。我希望代码很简单。

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

来源

2015-05-21 18:54:47 lshettyl

你可以做这样的事情：

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

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

由于太平的意见，使用CSS建议。这是最好的方式。

来源

2015-05-21 16:07:39

我认为你的解决方案更多的是正确的道路，请检查更新的问题。是：var buffer =（$（window）.height（）<768）？80：110;部分正确吗？我认为它会是：var buffer =（$（window）.width（）<768）？80：110;而不是 – Johann

感谢Johann纠正我。我会更新答案。 –

动力高度（）的窗口大小调整（）与可变利润率

回答

相关问题