通过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时，限制不再存在。