火狐中显示DIV滚动条
代码:
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
window.onload=function (){
var t=document.getElementById("t");
var one=document.getElementById("one");
one.style.height=window.document.body.clientHeight-25;
}
function change()
{
var t=document.getElementById("t");
var one=document.getElementById("one");
one.style.height=window.document.body.clientHeight-25;
}
</script>
</head>
<body onresize="change();">
<table width="173" height="100%" border="0" cellpadding="0"
cellspacing="0" id="t" >
<tr>
<td height="3%" background="main/util/img/main_11.gif">
</td>
</tr>
<tr>
<td>
<div id="one" style="overflow-y:scroll;overflow-x:scroll;margin: 0, 0, 0, 0; height:auto;height*:100%;width: 173px;" >
<jsp:include page="tree.jsp"></jsp:include>
</div>
</td>
</tr>
</table>
</body>
</html>
如果Div的height用%比表示时,并且该div中的内容超过页面高度,在火狐浏览器中将不显示滚动条。如果要显示滚动条要用px表示height;
height:auto;height*:100%;表示在所有浏览器中height适应,在ie中为100%,火狐不认识*。
window.onload=function (){
var t=document.getElementById("t");
var one=document.getElementById("one");
one.style.height=window.document.body.clientHeight-25;
}
此段代码表示将height:auto的高度设成body的高度减去25px;
这样在火狐和ie中就可以显示滚动条的效果了。
但是按下F11发现ie全屏了,而火狐中的table没有达到效果。
解决办法:
function change()
{
var t=document.getElementById("t");
var one=document.getElementById("one");
one.style.height=window.document.body.clientHeight-25;
}
在BODY 中加一个onresize事件,如果body大小改变了,引发事件,重新定义div中的height,达到效果。
分享到:
相关推荐
"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...
而当这些`div`元素中的内容超出其设定的宽度或高度时,滚动条就会出现,以帮助用户浏览不可见的部分。在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、...
在前端开发中,有时我们需要对浏览器的默认滚动条进行自定义,以提升用户体验或符合页面设计风格。Vue.js,作为一款流行的JavaScript框架,提供了多种方式来实现这一需求。本篇文章将详细探讨如何在Vue项目中自定义...
描述中提到的“sly jquery定制div滚动条Scrollbar 兼容IE6 FireFox Safari”,意味着这个解决方案不仅关注美观,还考虑到了浏览器兼容性问题。IE6是一个老版本的Internet Explorer,通常对现代Web技术支持不足,而...
在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...
以上代码展示了如何在Webkit和Firefox浏览器中自定义滚动条的样式。需要注意的是,不同浏览器对滚动条样式的支持程度不同,通常Webkit内核的浏览器(如Chrome、Safari)支持更丰富的样式定制。 除了基本的样式调整...
4. **浏览器兼容性处理**:由于不同浏览器对滚动事件和滚动条的支持程度不同,编写JavaScript代码时需要考虑跨浏览器兼容性,可能需要用到像`event.wheelDelta`(旧版本Firefox和IE)或`event.deltaY`(现代浏览器)...
在网页设计中,滚动条是不可或缺的元素,尤其是在内容超过屏幕显示范围时。HTML和CSS是构建网页的基础,其中HTML负责结构,CSS负责样式。本文将深入探讨如何使用HTML和CSS来实现滚动条的显示、隐藏以及自定义样式,...
使用 CSS 可以自定义浏览器滚动条的样式,但是 CSS 只能转变 Chrome 和 IE 浏览器的样式,无法对 Firefox 浏览器进行样式定义。因此,我们需要使用 JavaScript 来实现自定义浏览器滚动条。 二、JavaScript 实现...
这样,我们不仅可以实现`textarea`滚动条样式的自定义,还能确保在各种浏览器中保持一致的显示效果。 最后,对于压缩包中的"滚动条样式"文件,这可能是包含上述CSS样式或JavaScript实现的代码文件,具体使用时需要...
当在一个页面(A页面)中使用iframe来加载另一个页面(B页面)时,如果B页面的内容超过了iframe的高度或宽度限制,可能会导致在A页面中出现不必要的滚动条,或者无法正常显示B页面的内容。这种情况下的滚动条问题...
在网页设计中,有时我们可能需要自定义或模拟滚动条以增强用户体验或配合特定的设计风格。JavaScript(简称JS)提供了一种方式来实现这一功能,让我们深入探讨一下如何使用JavaScript来模拟滚动条。 首先,我们需要...
关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能,这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如,在一个产品...
FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条 FireFox火狐浏览器与IE浏览器之间存在着一些兼容问题,这些问题可能会对网站的开发和维护产生影响。下面是关于FireFox火狐浏览器与IE浏览器兼容问题的总结: ...
需要注意的是,这些滚动条样式仅在某些浏览器(如Firefox和Webkit内核的浏览器,如Chrome、Safari)支持,对于不支持的浏览器,可能需要使用浏览器特定的前缀,例如`-webkit-`,以实现跨浏览器兼容性。 在实际应用...
可以创建一个div作为模拟滚动条的元素,并通过调整其位置来匹配实际滚动位置。 3. **计算滚动位置**: 当用户滚动时,我们需要获取滚动元素的滚动高度和总高度,以及可视区域的高度,然后计算出当前滚动条应该显示...
2. **选择元素**:选择需要添加自定义滚动条的DOM元素,可以是整个body,也可以是特定的div或其他容器。 3. **初始化插件**:通过JavaScript调用mCustomScrollbar函数,传入相应的配置参数,例如: ```javascript ...
在网页设计中,滚动条是一个不可或缺的元素,尤其在展示大量数据或内容时。jQuery,一个广泛使用的JavaScript库,提供了丰富的功能和方法来定制和增强滚动条效果,使其更加美观且符合用户体验。本篇文章将深入探讨...
在网页设计中,滚动条是页面内容过多...不过,需要注意的是,自定义滚动条的兼容性主要依赖于Webkit浏览器(如Chrome和Safari),对于非Webkit浏览器(如Firefox、IE),可能需要额外的解决方案或调整以实现类似效果。
这段代码将确保在Firefox和IE8中,不论页面内容是否超过一屏幕,竖向滚动条都会始终显示。需要注意的是,这种方法只适用于HTML元素,如果需要在其他元素(如body或特定div)上应用此规则,只需将选择器替换为相应的...