在頁面加載時設置容器的最小高度原型

好的，所以我嘗試使用原型在頁面加載時動態設置容器的最小高度，以便頁面正確顯示。我的頁眉和頁腳等於345px的高度，所以我試圖將我的主容器div的最小高度設置爲頁面加載時窗口的內部高度減去這些尺寸，因此即使在這些文檔中沒有內容的頁面也能正確顯示。以下是我迄今爲止嘗試：在頁面加載時設置容器的最小高度原型

document.observe("dom:loaded", function() { 
    var minHeight = window.innerHeight; 
    minHeight -= 345; 
    $('main-container').style.minHeight = minHeight; 
});

和：

document.observe("dom:loaded", function() { 
    var minHeight = window.innerHeight; 
    minHeight -= 345; 
    $('main-container').setStyle({ 
     minHeight : minHeight 
    }); 
});

我知道通過在document.observe功能的警報在頁面加載腳本火災，但它不添加高度或拋出任何錯誤。有任何想法嗎？

編輯

感謝@Andrew回答，我還增加了當用戶改變這個代碼，並想我會分享：

Event.observe(window, 'resize', function() { 
    var minHeight = window.innerHeight; 
    minHeight -= 345; 
    $('main-container').setStyle({ 
     'min-height' : minHeight+'px' 
    }); 
});

來源

2013-04-18 Phil Young

不應該'minHeight：minHeight'是''最小高度'：minHeight +'px'' – Andrew

@Andrew這是解決方案，謝謝:) –

我已經把它作爲一個答案，以便它是更容易看到。 – Andrew

不應該minHeight : minHeight是'min-height' : minHeight+'px'

來源

2013-04-18 15:50:46 Andrew

在頁面加載時設置容器的最小高度原型

回答

相關問題