div max-height使用javascript動態設置

Question

我有一個使用母版頁和內容頁的網絡應用程序（請參閱附加圖像）。我需要根據瀏覽器窗口大小動態地設置內容頁面中一個div的最大寬度（以便整個應用停留在頁面上而不滾動）。我無法找到sloution（或無法複製結果）只使用HTML和CSS。所以我想用javascript來做。但問題是，我從來沒有使用它，所以我真的不知道該怎麼做。如果有人花了幾分鐘的時間寫出能做到這一點的功能，我真的會感到非常滿意。正如我所看到的，我應該在頁眉的底部邊緣和頁腳的頂部邊緣之間取高度差，並減去搜索欄和按鈕欄的高度值。

編輯： 感謝maxedison提供的代碼。但是，我如何使用它？ ：D我是一個總noob。我有一個問題，因爲我使用了masterpage和content頁面。我在哪裏放置該代碼？

編輯2 - 答案：

我看遠一點到如何使用jQuery，這裏多一些搜索，我找到了解決辦法。下一次我開始開發一個應用程序，我會從底層使用jQuery ......它只是簡化了一些東西。 :)

所以對於解決方案：它類似於maxedison的建議，但我改變了它，所以我用CSS設置高度，我只是添加了一個固定值從window.height中扣除。

<script type='text/javascript'> 
    $(function() { 
     $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' }); 

     $(window).resize(function() { 
      $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' }); 
     }); 
    }); 
</script> 

Answer 1

使用jQuery，它看起來是這樣的：

function resetHeight(){ 
    var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight(); 
    $('.content').height(newHeight); 
} 

$(function(){ 
    newHeight(); 

    $(window).resize(function(){ 
     resetHeight(); 
    }); 
}); 

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.