動力高度（）的窗口大小調整（）與可變利潤率

所以如果有這個功能，以動態地設置基於瀏覽器的高度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糾正我。我會更新答案。 –

動力高度（）的窗口大小調整（）與可變利潤率

回答

相關問題