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

Question

这应该很简单，但什么都不起作用：

问题：

如何设置网页的高度为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的高度样式属性时，除非页面上有实际内容，否则似乎不会触发滚动条。我该如何使页面“永久高大”，也就是说，即使页面上只有一行文本，页面也要表现出（滚动）好像有4000像素的内容。目前它的行为就好像有一个调用：
height = Math.min(contents的高度, div样式的高度)

- gMale

Answer 1

CSS 超级简单：

body
{
    height: 4000px;
}

这里有一个示例。

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

- Kyle

Answer 2

您是否尝试过在 body 或 html 标签上使用 min-height？min-height 要求元素至少具有指定的高度，而不考虑其中包含的内容。

CSS

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

Live Demo

Reference

- Loktar

---

将HTML的高度设置为多少？这很合乎逻辑，但并不起作用。应该在body标签上进行设置。 - Kyle

@Kyle Sevenoaks 在我这里工作，请查看 fiddle 并删除 body。 - Loktar

可能对某些事情有效，但请查看相关内容：http://stackoverflow.com/questions/4122727/internet-explorer-doesnt-recognise-the-html-css-background-image-tag/4122745#4122745 - Kyle

@Loktar：这根本不起作用，但是……在看到你提供的实时演示链接后，我想这一定会起作用，所以我把所有东西都剥离到最基本的例子。然后它就完美地工作了！所以我的样式表肯定有问题。感谢您的帮助，现在我将尝试调试其他问题……也许与样式表顶部的“重置”有关…… - gMale

@gmale，希望你能解决它。 - Loktar

Answer 3

在你的 CSS 中添加：

body
{
    min-height: 4000px;
}

你还需要：

body
{
    height: 4000px;
}

适用于Internet Explorer（通过IE的条件注释）。

- Gareth

Answer 4

在Chrome 10和OSX 10.6上，这将呈现出一个完全空白页，带有Y轴滚动条，希望这是您所期望的。

http://pastie.org/1674432

- Jon-Paul Lussier