如果瀏覽器高度小於給定的像素數量，如何更改div高度？

我有一個div，我想成爲兩種尺寸之一。如果瀏覽器高度小於給定的像素數量，如何更改div高度？

如果瀏覽器窗口的高度是比一個給定的高度更小，那麼它採用了DIV較小的高度
但是，如果瀏覽器窗口高度大於給定的高度大，那麼它使用更大的高度股利

我試過下面的代碼，但它不工作。我需要幫助才能使其工作。

這裏是我的代碼至今：

page.html中

<div id="theDiv">&nbsp;</div>

的style.css

#theDiv { 
    background: #000; 
    border: 2px solid #222; 
    width: 300px; 
    height: 400px; 
    margin: 50px auto 0 auto; 
}

周的script.js

$(document).ready(function() { 
    // call the method one time 
    updateWindowSize(); 
    // subscribe the method to future resize events 
    $(window).resize(updateWindowSize); 

    // variables 
    var updateWindowSize = (function(){ 
     var minAllowedWindowHeight = 500; 
     var largerDivHeight = 400; 
     var smallerDivHeight = 300; 

     // actual updateWindowSize function 
     return function(){ 
      var winHeight = $(window).height(); 
      var newHeight = winHeight < minAllowedWindowHeight ? smallerDivHeight : largerDivHeight; 
      $('#theDiv').height(newHeight); 
     }; 
    })(); 
});

來源

2013-10-17 Accelerator

您可以在CSS做我的好先生。它被稱爲響應式設計！

@media (max-height:500px) { 
    Enter special css conditions for 500px height. 
} 

@media (max-height:200px) { 
    Enter special css conditions for 200px height. 
}

這是較爲常用的最大寬度，因爲它可以當有人使用移動設備（像360像素，最大寬度）告訴我們，然後我們可以修改我們的頁面，看起來不錯的手機。沒有花哨的JavaScript需要！

來源

2013-10-17 13:55:23

我不知道如何使用這個。我在哪裏定義最低WINDOW高度，以及在哪裏定義特定ID？ – Accelerator

我不明白你爲什麼在這裏有兩個單獨的規則？你只需要一個？ – ediblecode

您將此代碼放入.css文件中。這不是JavaScript，它是CSS。或者你可以把它放在索引頁面的樣式標籤中。我只是舉了兩個規則作爲例子，你可以在多個高度上做到這一點。這是你的一個簡單例子！ [jsfiddle鏈接]（http://jsfiddle.net/z5W9j/），調整右下方窗口的大小以根據高度查看框更改顏色。所有你需要做的就是改變發生這種情況的高度（200px），並改變div的大小而不是顏色。 –

var threshhold; 
var smallerHeight = 50; 
var largerHeight = 100; 

if ($(window).height() < threshold) 
    $('#theDiv').height(smallerHeight); 
else 
    $('#theDiv').height(largerHeight);

FIDDLE

Demo

來源

2013-10-17 13:57:23 ediblecode

這與我所使用的完全相同，只是我使用了'minAllowedWindowHeight'的變量名而不是'threshhold'變量名。你也忘了爲'threshhold'定義一個數字。即'threshhold = 500;'無論如何，因爲這與我的問題完全相同，所以它當然不起作用。 – Accelerator

@ user2845197你看錯了嗎？你有錯誤，這就是爲什麼它不起作用。 – ediblecode

這適用於你的jsfiddle！謝謝;唯一的事情是我不得不接受其他作爲最佳答案，因爲他們做得甚至更簡單，甚至沒有任何JavaScript。但你的解決方案工作，太糟糕了，我不能選擇兩個最好的答案！至少我投你了:) – Accelerator

如果瀏覽器高度小於給定的像素數量，如何更改div高度？

回答

相關問題