通过 CSS 或 JavaScript/JQuery 设置元素高度答案

【问题标题】：Set an element height via CSS or JavaScript/JQuery通过 CSS 或 JavaScript/JQuery 设置元素高度
【发布时间】：2011-03-15 13:52:39
【问题描述】：

这应该很简单，但没有任何效果：

问题

您如何将网页的高度设置为，比如说，正好 4000 像素，这样即使页面为空白，滚动条也会存在？

背景

我是 JavaScript/JQuery 的新手，但对类似技术非常有经验。我正在尝试基于滚动页面做一些花哨的效果。为了有条不紊地完成这一点，作为第一步，我希望制作一个“非常高”的页面。从那里我将根据滚动高度隐藏/显示项目，伪代码如下：

function onScrollEvent() {
    var height = scroll height
    var sectionIndex = Math.floor(height / MAX_SECTION_HEIGHT);
    for each item in my array of graphics
         if item index != sectionIndex then item.fadeOut else item.fadeIn
}

一旦我完成了这项工作，我将开始创建我想看到的效果。问题是，我不能让愚蠢的页面“真的很高”。

总结

当我设置 main-content div 的 height 样式属性时，它似乎不会触发滚动条，除非页面上有实际内容。可以这么说，如何使页面“永久高”？也就是说，即使页面上只有一行文本，我希望页面的行为（滚动）就好像它具有 4000 像素的内容。现在它的行为好像有一个调用：
height = Math.min(height of contents, height of div style)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您是否为body 或html 标签尝试过min-height？ min-height 要求元素至少为该高度，无论包含的内容如何。

CSS

html, body{
    min-height: 4000px;
}

Live Demo

Reference

【讨论】：

将高度设置为 HTML？这是合乎逻辑的，但不起作用。它应该设置在body标签上。
@Kyle Sevenoaks 为我工作，检查小提琴并移除身体。
它可能适用于某些事情，但请检查相关：stackoverflow.com/questions/4122727/…
@Loktar：这根本不起作用，但是...在看到您指向现场演示的链接后，我认为这必须起作用，所以我将所有内容简化为最基本的例子。然后它成功了，完美！所以我使用的样式表一定有问题。感谢您的帮助，现在我将尝试调试其他问题...也许它与样式表顶部的这种样式“重置”内容有关...
@gmale 我希望你弄清楚

【解决方案2】：

简单的 CSS：

body
{
    height: 4000px;
}

Example here.

这是最简单的方法。 min-height 并非所有浏览器都支持。这是一个特定的高度，您可以将其设置为正文标签（本质上是网页本身）以使其非常高。

【讨论】：

【解决方案3】：

在你的 CSS 中添加：

body
{
    min-height: 4000px;
}

你还需要：

body
{
    height: 4000px;
}

用于 Internet Explorer（通过 IE 的条件 cmets）。

【讨论】：

【解决方案4】：

在 Chrome 10 中，在 OSX 10.6 上 - 这会呈现一个完整的空白页面，并在 Y 轴上滚动，希望这就是您的意思：

http://pastie.org/1674432

【讨论】：