问题

如何将网页的高度设置为恰好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(height of contents, height of div style)

Answer 1

CSS简单：

body
{
    height: 4000px;
}

Example here

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

Answer 2

您是否针对min-height或body代码尝试了html？无论所包含的内容如何，min-height都要求元素至少为该高度。

<强> CSS

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

<强> Live Demo

<强> Reference

Answer 3

在CSS中添加：

body
{
    min-height: 4000px;
}

你还需要：

body
{
    height: 4000px;
}

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

Answer 4

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

http://pastie.org/1674432

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

问题

背景

摘要

4 个答案: