基於窗口大小改變高度

我想改變一個div的高度爲百分比爲基礎，而不是基於像素，我有下面的代碼，我很好奇我現在將如何將它從像素更改爲百分比。基於窗口大小改變高度

最終結果是我想要一個div根據窗口當前高度的百分比重新調整它的高度。

編輯：根據下面的代碼的高度和寬度條件實際上並不需要，但它是爲了測試的目的，因爲我試圖找到解決方案。

請原諒我的天真，我相對較新的JavaScript。

$(function(){ 
    $(window).resize(function(){ 
     var h = $(window).height(); 
     var w = $(window).width(); 
     $(".gallery-container").css('height',(h < 768 || w < 1024) ? 800 : 400); 
    }); 
});

來源

2013-10-28 Nikki Mather

你只是想讓div的窗口高度達到100％嗎？ –

您是指長寬比？ – 2013-10-28 17:31:56

由於您明確使用jQuery，我添加了'jquery'標籤。 –

靠數學的力量！

var h = $(window).height(); 
var scale = 0.75; // This is 75% 
$(".gallery-container").css('height', h * scale);

來源

2013-10-28 17:35:17 dimoniy

嗨，這看起來接近我需要的東西，但由於某種原因無法讓它工作 - 當我重新調整窗口大小時，沒有任何觸發。 –

根據您的JavaScript代碼（我猜它不完全正確），這是在CSS相應的解決方案：

.gallery-container { height: 400px; } 

@media screen and (max-width: 1024px) or (max-height: 768px) { 
.gallery-container { height: 800px; } 
}

來源

2013-10-28 17:47:52 Adam

代碼的高度和寬度部分實際上並不需要，我應該在我的第一篇文章中加入。頁面的高度和寬度（以像素爲單位）無關緊要 - 我想僅根據窗口的當前高度來調整大小。如果用戶稍微調整窗口大小，div應自動調整大小（即使是1px）。 –

我發現另一種解決方案，這似乎是目前可以正常使用。

$(window).resize(function(){ 
    var newheight = $(window).innerHeight();  
    $(".gallery-container, #static ul li img").height(newheight/2); 
});

來源

2013-10-28 18:07:33

基於窗口大小改變高度

回答

相關問題