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属性，则无法使用短划线。 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时，限制不再存在。

通过JavaScript根据HTML文档的高度更改边距/填充？

2 个答案: