通過JavaScript根據HTML文檔的高度更改邊距/填充？

Question

幾個月前我在堆棧溢出解決方案上看到了一個技巧（我現在無法通過搜索找到它）。 無論如何，它基本上說如果你想要兩個高度相同的div，你可以沿着這些方向做點什么：

<div id="wrapper">
    <div id="nav" style="padding-bottom: 500px; margin-bottom: -500px;">
    </div>
    <div id="content" style="padding-bottom: 500px; margin-bottom: -500px;">
    </div>
</div>

填充和負邊距似乎相互抵消，只要div內的數據內容沒有溢出超過500px的限制就會呈現正確的高度（非常漂亮，但顯然有很大的限制）。

我們只是假設div設置風格明智，彼此相鄰，就像一個占據屏幕寬度的20％，另一個占80％。

這對我來說非常有效，不過我承認我並不理解它。 但這是我的問題 - 我可以為margin / padding設置一個非常大的值來使這個工作的頁面長度很長，但我認為這可能效率很低而且編程很差。

如何使用JavaScript將div的樣式設置為整個HTML文檔的高度，以便我可以以編程方式正確地執行此操作？ 我應該在哪里調用可以做到這一點的JavaScript行？

到目前為止，這是我最接近的鏡頭：

function varPageHeight()
{
    document.getElementById('nav').style.padding-bottom = self.innerHeight + 'px';
    document.getElementById('nav').style.margin-bottom  = self.innerHeight + 'px';
    document.getElementById('content').style.padding-bottom = self.innerHeight + 'px';
    document.getElementById('content').style.margin-bottom  = self.innerHeight + 'px';
}

雖然它不起作用 - 它看起來像屏幕高度而不是文檔高度或類似的東西。

Answer 1

如果您在JavaScript中使用CSS屬性，則無法使用dash。 CSS屬性： padding-bottom是JavaScript中的paddingBottom

所以你的代碼應該是這樣的：

function varPageHeight()
{
    document.getElementById('nav').style.paddingBottom = self.innerHeight + 'px';
    document.getElementById('nav').style.marginBottom  = self.innerHeight + 'px';
    document.getElementById('content').style.paddingBottom = self.innerHeight + 'px';
    document.getElementById('content').style.marginBottom  = self.innerHeight + 'px';
}

或者您可以使用jQuery：

function varPageHeight() {
    var innerHeight = self.innerHeight;
    $('#nav').css({
        'padding-bottom': self.innerHeight,
        'margin-bottom': self.innerHeight
    });
    $('#content').css({
        'padding-bottom': self.innerHeight,
        'margin-bottom': self.innerHeight
    });
}

Answer 2

說實話，如果你想要獲得相同的高度浮動列，並且你仍然使用javascript作為解決方案，不要依賴於填充/邊距。 這很丑陋，並帶來了一系列問題。 最好的辦法就是將所有列的高度設置為w / e最高。

這是一個在jQuery中執行此操作的解決方案： http ： //jsfiddle.net/sg3s/6W4wb/

純粹的javascript可以完成，但你將有一個地獄的工作使其正常工作/跨瀏覽器（特別是IE的舊版本）與他們所有的高度應該是什么。

如果你真的想要填充/邊距解決方案我想知道為什么，因為我真的不能想到這樣做的好理由。 該特定解決方案被設計為css限制的工作范圍......當你使用javascript時，限制不再存在。