固定位置的div

2023-11-30

我有一个样式为position:fixed 的div,我希望它向下滚动页面,但我不希望div 溢出到页脚中。我怎样才能做到这一点?

提前致谢, 肖恩


尝试这个。

CSS

body, html {height:100%;margin:0;padding:0} /* margin and padding 0 for firefox*/
.mainBody {height:90%;overflow:auto;}

HTML

  <div style="border:1px solid black;">TOP</div>
  <div class="mainBody">
      <div style="height:800px;"></div> <!-- To for scroll -->
      HERE IS Main Body
  </div>

这会将滚动条从窗口转移到显示内容的 div。 TOP div 将保留在您想要的任何位置,因此您可以将其绝对定位或保持原样,并且永远不会与页脚发生冲突,您可以将页脚放入主体 div 中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

固定位置的div 的相关文章

  • WebElement 上的 Selenium WebDriver“find_element_by_xpath”

    我正在尝试使用以下行查找元素 elements driver find elements by xpath div class Display 一旦我有了元素 我知道有两个 显示 我希望能够使用第二个元素并在其中找到一个特定元素 如下所示
  • CSS 省略号与内联元素?

    我已经调整了 jQuery UI MultiSelect Widget 以便文本将显示所有选定的标签 但如果选择显示太多元素 则文本将被修剪和省略 我是这样做的 ui multiselect selected text display bl
  • 检查元素是否在视口的 30% 到 60% 之间

    我正在尝试改变颜色 li 当元素占视口的 30 到 60 之间时 所以我有这个元素网格并排堆叠 如下所示 我遇到了一些插件 例如 Waypoints Viewport Checker 和其他一些插件 但没有什么好的 任何想法 我正在使用一个
  • 与 contenteditable 相关的用户事件

    I am a beginner in Javascript HTML5 假设我有一个 contenteditable div 我的 HTML5 窗口中的 block level 元素 是什么详尽的用户可以通过用户交互修改此元素 或某些子元素
  • 列表的 CSS 计数器

    我正在尝试在我的有序列表上使用 css 中的计数器增量 但它不起作用 这就是我想要显示的内容 1 Acknowledgements 1 1 blah blah 1 2 blah blah 1 3 blah blah 2 Risk State
  • 将自动生成的 Matlab 文档导出为 html

    我想为我开发的 Matlab 工具箱生成完整的帮助 我已经看到如何显示自定义文档 http www mathworks fr fr help matlab matlab prog display custom documentation h
  • 如何交换 2 个元素的两侧(一个使用 float:left,另一个使用 float:right)

    I have a website with an image on one side and text on the other This is how it looks 正如您在图像中看到的 左侧有一些文本 右侧有图像 然后左边有图像 右
  • 更改网格模板列会破坏布局

    定义时grid template columns在相应的父 div 中这很好 wrapper display grid grid template columns 1fr 1fr 700px 但是如果我只想要两列怎么办 如果我删除其中之一f
  • 如何在 CSS 中将子元素居中,即使它比父元素大?

    我想创建一个 css 类 以便可以将 div 放置在其父级的中心 我正在使用的代码是 centered position absolute margin auto bottom 0px left 0px top 0px right 0px
  • 列表项的替代背景颜色

    我有一个列表 每个项目都是链接的 有没有办法可以替换每个项目的背景颜色 ul li a href link Link 1 a li li a href link Link 2 a li li a href link Link 3 a li
  • 如何使输入字段的宽度为 100% 减去提交按钮的宽度?

    我有一个非常基本的单一输入字段 旁边有一个 提交 按钮 搜索按钮的固定宽度为 104 像素 两者都包裹在一起 总宽度占浏览器视口的 50 我的计划是允许输入字段随着浏览器窗口的扩大而扩大 目前 对于我的特定浏览器窗口 我必须修复输入字段的宽
  • 如何自定义 Angular Material 的 input/md-input-container 组件?

    正如标题所述 我如何自定义这些元素 他们似乎使用透明背景 这在大多数背景调色板上很难查看 在 angular material css 后添加一个空白 css 文件 并在该空白 css 文件中覆盖您要自定义的规则 对于您面临的问题 我在 c
  • Tailwind CSS:“outline”类不存在。但这不是自定义样式,而是框架类

    在一个新项目中 我得到了奇怪的行为 除了大纲和相关内容之外 一切都按预期进行 https tailwindcss com docs outline style https tailwindcss com docs outline style
  • 如何让更大的布局适合小设备屏幕?

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技
  • d3 序数尺度的映射

    我正在使用 D3 的序数比例将数字映射到颜色 我用过这个 color d3 scale ordinal range 1f77b4 ff7f0e 2ca02c d62728 9467bd 8c564b e377c2 domain 0 6 co
  • 是否可以全局文本对齐表列而不在每行中指定类?

    想知道提高效率的最佳方法是什么 也许使用 jQuery 我可以接受不兼容 ie7 的解决方案 如果需要的话 即使缺乏对 ie8 的支持也可以 table th td class cal center td td left td td cla
  • 在文档流中提取一个元素

    这是示例代码 top background lightGreen content outline 1px solid red bottom background lightBlue div Top div div Lorem ipsum d
  • 为什么 Firefox 对 Helvetica 的处理方式与 Chrome 不同?

    Firefox 和 Mac 版 Chrome 中以 Helvetica 呈现的文本的垂直位置及其内容区域的大小有所不同 例如 在 Chrome 中 如果行高与字体大小相同 则下行部分将被剪裁 我调整了图中块元素的位置 保持基线一致 以说明大
  • iPad 上的网站纵向视图

    我的网站在 iPad 纵向模式下无法正确显示 它在横向模式下看起来不错 但当我将其转换为纵向模式时 我最终会得到一个混乱的网站 所有元素都分散在整个网站上 我怎样才能解决这个问题 请帮我 这是我网站的链接 inclouds co uk ht
  • 如何在 HTML 中创建可编辑的下拉列表?

    我想创建一个带有下拉列表的文本字段 让用户选择一些预定义的值 用户还应该能够键入新值或从下拉列表中选择预定义值 我知道我可以为此使用两个小部件 但在我的应用程序中 如果将其统一在一个小部件中会更符合人体工程学 是否有标准小部件或者我必须使用

随机推荐

  • python 设置将 (pdf) 转换为 jpeg 时的最大文件大小,例如棍棒

    为了后续处理的目的 在 python 中我正在转换一个多页 PDF f 转换为 JPEG temp jpg import os from wand image import Image as wimage with wimage filen
  • 从 Windows 中的文件名中删除最后一个字符

    我对批处理编程很陌生 我想删除文件名中的最后一个字符 10 myfile 12345 6789 txt 11 myfile 12345 0987 txt 我想删除文件名的最后 4 位数字 我该怎么做 我已经尝试过这个 echo off se
  • 使用 SpongyCastle 进行 RSA

    我对加密的了解非常基础 因此对于我的无知表示歉意 在 Android 应用程序中 我目前正在尝试使用以下命令来模拟此命令的执行SpongyCastle 图书馆和标准java security libs echo test openssl r
  • 以编程方式添加具有多个号码的一位联系人 Android

    如何以编程方式在 Android 手机上添加一个具有多个号码的联系人 我们可以这样做 将名称和数字数组传递给此方法 public static void addToContactList Context context String str
  • background_task.py 不显示消息 - Python

    我注意到 当我从 Discord py Github 页面运行代码片段时 它没有显示预期的消息 我稍微修改过的代码 import discord import asyncio import nest asyncio nest asyncio
  • 计算运行中位数时缺失值?

    我想平滑时间序列以避免虚假抖动 错误 换句话说 我想做一些非常局部的鲁棒平滑 我在动物园包中遇到了 rollmean 和 rollmedian 但遇到了问题 因为我的向量中有一个 NA 然后我在某处读到那些动物园函数使用 runmed 这就
  • 如果我不知道实际的对象类型,如何在 C# 中比较两个 IEnumerable

    我正在努力实施IEquatable lt gt 一个类的接口 班级有一个Parameter使用泛型类型的属性 基本上类的定义是这样的 public class MyClass
  • 如何访问父组件中子组件的引用

    如果我有类似的东西
  • 使用 Python Paramiko 执行命令并等待其完成

    我在 Paramiko 中编写了这段代码 ssh SSHClient ssh set missing host key policy AutoAddPolicy ssh connect hostname username user pass
  • 为什么 R 在文件路径中使用正斜杠 (/) 而不是反斜杠 (\)

    我正在教授在线课程 一个学生问我为什么 R 只使用 并不是 使用时在文件路径中read csv以及其他相关功能 我试着看看文档但它并没有真正提到任何相关内容 从来没有真正考虑过这个问题 因为我使用 Mac Mac 中的默认设置是 但在 Wi
  • ZipEntry 中的额外字节有何用途?

    用于 Zip 文件的 Java 库有一个选项ZipEntry for getExtra 返回byte or null ZipEntry 中的额外字节有何用途 我知道这个问题关于链接到的存档属性getExtra 但它没有解释该字段的其他用途
  • 如何将 kendo Ui 下拉列表选定值的 ID 传递到控制器?

    我正在尝试创建一个使用 KENDO UI Dropdown 的应用程序 问题是我想将视图中的值更新到数据库中 在选择下拉列表中的任何值时 与其关联的 ID 应传递到控制器以进行所需的数据库更新 但这里下拉列表的任何选择的 ID 都会将 nu
  • Alfresco 共享登录问题

    我发现本地安装的露天共享存在一些问题 当我尝试使用登录时 http localhost 8080 共享 它向我返回此错误消息 The remote server may be unavailable or your authenticati
  • 更新 github 上的分叉存储库

    我从 github 分叉了一个存储库 它称为 bootstrap 我已经克隆了我的叉子 git clone https github com Fowowski bootstrap git bootstrap 项目有一个 master 分支和
  • ‘$’不被识别为内部或外部命令..”

    我已经安装了 Node 并重新启动了计算机 将 C Program Files nodejs 添加到我的路径中 但是当我在命令提示符中运行 node version 来检查版本时 它返回 未被识别为内部或外部命令 可操作程序或批处理文件 你
  • SQL Server 中的 DECIMAL 和 NUMERIC 有什么区别吗?

    SQL Server 中的 DECIMAL 和 NUMERIC 数据类型有什么区别吗 什么时候应该使用 DECIMAL 什么时候应该使用 NUMERIC 他们是一样的 数字在功能上等同于十进制 MSDN 小数和数字
  • 使用 Moment.js 进行区域设置检测

    我在项目中使用 Moment js 并格式化日期 如下所示 var date moment unix 1318781876 return date format LLLL 目前文档声明支持多个区域设置 我想知道 moment js 是否会自
  • JavaFX 2:在 TableCell 中保存编辑

    在我的 JavaFX 程序中 我使用 TableCell 您可以在其中编辑值 就像 JavaFX 页面上的示例所示 例子 我使用这个函数来保存更改 函数在编辑单元格的 TextField 上设置 textField setOnKeyRele
  • 如何向socket通道写入数据

    是否有任何小型工作程序可以使用 java nio 从客户端接收数据并向客户端发送数据 实际上我无法写入套接字通道 但我能够读取传入的数据 如何向socket通道写入数据 谢谢 迪帕克 您可以将数据写入套接字通道 如下所示 import ja
  • 固定位置的div

    我有一个样式为position fixed 的div 我希望它向下滚动页面 但我不希望div 溢出到页脚中 我怎样才能做到这一点 提前致谢 肖恩 尝试这个 CSS body html height 100 margin 0 padding