如何在没有两组滚动条的情况下在HTML页面顶部创建非滚动div

作者：mobiledu2402852413 | 2023-09-03 13:02

如何解决《如何在没有两组滚动条的情况下在HTML页面顶部创建非滚动div》经验，为你挑选了2个好方法。

如何在没有两组滚动条的网页上创建看起来像MS Office 2007功能区的非滚动div.一个用于窗口,一个用于div.

1> Prestaul..：

试试这个:



    
        Fixed Header/Full Page Content
        
        
    
    
        HEADER
        
            FIRST
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            MAIN
            LAST

基本上,您正在做的是从正文中删除滚动条并将滚动条应用于文档内的元素.这很简单.诀窍是让#maindiv的大小填充标题下面的空格.这在大多数浏览器中通过设置top和bottom位置并保留未height设置来实现.结果是div的顶部固定在标题下方,div的底部将始终延伸到屏幕的底部.

当然,总有IE6可以确保我们赚取薪水.在版本7之前,IE不会从冲突的绝对位置导出维度. 有些人使用IE的css表达式来解决IE6的这个问题,但是这些表达式实际上是对每个mousemove进行评估,所以我只是调整#mainresize事件上的div并使用条件注释从其他浏览器中隐藏javascript块.

将宽度设置为99%并将setTimeout设置为100%的行修复了IE6中的一点渲染奇怪现象,导致在调整窗口大小时偶尔出现水平滚动条.

注意:您必须使用doctype并使IE退出怪癖模式.

2> belugabob..：

使用固定位置

元素,宽度为100%,高度为100%z-index.

您还需要确保滚动内容的开头不会被固定内容遮挡

,直到您开始向下滚动,将其放入另一个

并适当地定位.


    
        HEader content goes here
    
    
        Main content goes here

请注意,第一个的高度

和第二个的上边距需要根据您的需要进行调整.

PS这在IE7中不起作用,出于某种原因,但它是一个很好的起点,我相信你可以在这个主题上找到一些变化,它可以按你想要的方式工作.

推荐阅读

程序员
将iOS应用程序上传到iTunes Connect时出现问题:"符号工具失败"

如何解决《将iOS应用程序上传到iTunesConnect时出现问题:"符号工具失败"》经验，为你挑选了1个好方法。 ... [详细]
程序员
可能有损转换从double到int并且找不到符号

如何解决《可能有损转换从double到int并且找不到符号》经验，为你挑选了1个好方法。 ... [详细]
程序员
将TensorFlow LSTM转换为synapticjs

如何解决《将TensorFlowLSTM转换为synapticjs》经验，为你挑选了1个好方法。 ... [详细]
程序员
CSS模块组成

如何解决《CSS模块组成》经验，为你挑选了1个好方法。 ... [详细]
程序员
对象在-z和-x角的z轴上翻转180度

如何解决《对象在-z和-x角的z轴上翻转180度》经验，为你挑选了0个好方法。 ... [详细]
程序员
在IPython笔记本中更改绘图窗口大小

如何解决《在IPython笔记本中更改绘图窗口大小》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用来自不同HTML属性的项填充数组

如何解决《使用来自不同HTML属性的项填充数组》经验，为你挑选了0个好方法。 ... [详细]
程序员
Umbraco将"IPublishedContent"类型转换为"CustomModel"类型

如何解决《Umbraco将"IPublishedContent"类型转换为"CustomModel"类型》经验，为你挑选了1个好方法。 ... [详细]
程序员
功能编程:Curry&Fold - 什么是词源？

如何解决《功能编程:Curry&Fold-什么是词源？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Android Widget更改背景颜色

如何解决《AndroidWidget更改背景颜色》经验，为你挑选了1个好方法。 ... [详细]
程序员
ffmpeg寻求计算错误的字节范围？

如何解决《ffmpeg寻求计算错误的字节范围？》经验，为你挑选了0个好方法。 ... [详细]
程序员
什么是__methods__,为什么调用__getattr__？

如何解决《什么是__methods__,为什么调用__getattr__？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Ember.js JSON API混乱

如何解决《Ember.jsJSONAPI混乱》经验，为你挑选了1个好方法。 ... [详细]
程序员
Velocity.js绕中心轴旋转

如何解决《Velocity.js绕中心轴旋转》经验，为你挑选了1个好方法。 ... [详细]
程序员
在默认的conda numpy中禁用/配置多线程

如何解决《在默认的condanumpy中禁用/配置多线程》经验，为你挑选了1个好方法。 ... [详细]
程序员
在用户响应之前,在自定义内核调用onRequestPermissionsResult上调用requestPermissions两次

如何解决《在用户响应之前,在自定义内核调用onRequestPermissionsResult上调用requestPermissions两次》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用WebWorkers呈现React组件

如何解决《使用WebWorkers呈现React组件》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何在ubuntu 15.10上将swift的导出路径添加到./profile中

如何解决《如何在ubuntu15.10上将swift的导出路径添加到./profile中》经验，为你挑选了1个好方法。 ... [详细]
程序员
准备加载内核

如何解决《准备加载内核》经验，为你挑选了0个好方法。 ... [详细]
程序员
从S3上的静态站点进行POST时,AWS API Gateway端点会出现CORS错误

如何解决《从S3上的静态站点进行POST时,AWSAPIGateway端点会出现CORS错误》经验，为你挑选了2个好方法。 ... [详细]

mobiledu2402852413

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站