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

标签 javascript jquery html css

这应该很简单,但没有任何效果:

问题

如何将网页的高度设置为恰好为 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(内容高度,div样式高度)

最佳答案

您是否尝试过 min-height 用于 bodyhtml 标签? min-height 要求元素至少为该高度,无论包含的内容如何。

CSS

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

Live Demo

Reference

关于javascript - 通过 CSS 或 JavaScript/JQuery 设置元素高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5312752/

相关文章:

javascript - Vue.js 模态对话框不显示值

php - 使用的条形码扫描仪功能 keyup 执行了两次

html - Angular - 基于用户输入的构建表单

javascript - 如何使用 jQuery 或 JavaScript 清除 <input type ='file'/> 中的文件

javascript - 显示/隐藏文本区域框+在图像之间交换onclick

javascript - 从 kotlin 创建新的 Node 模块对象

jquery - 如何简化多个选项的 jquery IF 语句

jquery - 如何在Jquery中显示对象的所有值?

css - 语义标记与一致的排版

javascript - 在窗口调整大小或移动设备上自动调整导航栏大小