在最近的项目中需要在页面展示许多的字段信息(不下30个),而且有的字段会比较长,不使用滚动框几乎无法浏览。但是用户不希望整个页面都带滚动框,因此只有在展示数据的列表中使用div来实现滚动效果,由于div实现了滚动必须确定其大小或者div的父元素中有确定大小的存在,所以在不同分辨率的浏览器中表现的大小就不一致,导致界面十分难看,经过一段时间查找也没有找到十分有效地方法,最后只好只用一个比较委婉的方式来实现了。
在页面加载完后,通过window.screen.width得到客户端分辨率的大小,再来设置div的大小,这样在不同分辨率的客户端中div的大小就表现的比较一致了。具体代码如下:
//根据当前页面的大小设置div的宽度
function setDivWidth(){
var clientWidth = window.screen.width;//获得客户端分辨率
var scrollDiv = document.getElementById("scrollDiv");
scrollDiv.style.overflow = 'scroll';//设置div为横向滚动模式
scrollDiv.style.width = clientWidth;//设置div的宽度
}
<body onload="setDivWidth()">
<div id="scrollDiv">
</div>
</body>
分享到:
相关推荐
【首页滚动图片自适应源码模板】是一种网页设计中常见的元素,主要应用于网站首页,用于以动态滚动的方式展示多张图片,以增加视觉效果和用户体验。这种模板通常包含HTML、CSS和JavaScript三个主要部分,使得图片...
"jQuery图片浏览自适应大小"是一个技术解决方案,旨在优化用户体验,确保图片在不同设备和屏幕尺寸下都能以最佳方式展示。这个话题涉及到JavaScript库jQuery的使用,以及响应式设计的一些基本原理。 首先,jQuery是...
在这个项目中,“jQuery网页自适应屏幕图片滚动切换”就是利用jQuery实现的一种响应式图片轮播技术。 首先,我们来理解“自适应”(Responsive)的概念。自适应网页设计意味着网页可以根据用户设备的屏幕大小和方向...
7. **HTML文件"div滚动 - 副本.html"**:这个文件很可能是项目的示例页面,包含了HTML结构和jQuery脚本的引用,用于演示横向无缝滚动效果。通常,HTML文件会包含一个容器div,里面包含要滚动的子元素,以及可能的CSS...
这个解决方案可以实现背景图片的自适应浏览器大小,并且可以在背景图片需要滚动条的情况下使用。 例如: ```html <div id="bg"></div> ``` ```css #bg { position: fixed; top: 0; left: 0; width: 100%; ...
`,当内容超出div的原始尺寸时,会自动出现滚动条。然而,这种方法不适用于所有情况,特别是当需要精确控制div高度时。 2. **JS监听内容变化**:可以使用JavaScript的事件监听器,如`MutationObserver`,来检测div...
《jQuery自适应大小焦点图:实现与应用》 在网页设计中,焦点图或幻灯图是一种常见的元素,用于展示一组图片并引导用户关注特定内容。"jQuery自适应大小焦点图"是专为此目的设计的JavaScript插件,它能够根据图片的...
如果图片的高度始终没有超出<div>的高度,那么即使设置了overflow:auto,<div>也不会有滚动条,也就无法显示其自适应高度的效果。 2. 使用CSS的Flexbox布局: Flexbox布局是一种更为先进和灵活的布局方式,它能更...
在本例中,内部`<div>`的宽度超过了外部`<div>`,但是由于设置了`overflow: auto`,外部`<div>`的宽度没有改变,并且添加了滚动条供用户滚动查看。 ### 结论 通过设置外部`<div>`的`overflow`属性为`hidden`或`...
自适应图片则根据设备屏幕大小自动调整图片尺寸,防止过度加载。 标签"表格自适应 手机 平板"暗示了这个主题的重点是针对手机和平板设备优化。在手机上,由于屏幕尺寸小,可能需要将表格的每一列单独显示,或者将长...
在网页设计中,让一个`div`元素的高度自适应浏览器高度是一个常见的需求,尤其是在创建全屏背景、响应式布局或者动态内容填充时。这个需求看似简单,但有时却容易让人困惑,因为仅设置`div`的高度为`100%`并不总是...
1. **媒体查询(Media Queries)**:利用CSS3的媒体查询可以实现响应式布局,根据设备的视口宽度调整BANNER的大小。例如,设置`width: 100%;`确保BANNER始终填满其父容器。 2. **百分比单位**:BANNER内图片或元素的...
在IE浏览器中,div的宽度似乎并不会根据内部内容动态变化,导致offsetWidth属性取得的宽度值过大,从而使得自适应大小的实现失败。 为了解决这个问题,文章提到了EXT框架的实现方式,其内部使用了span等随内容变化...
同时,为了使滑动切换自适应浏览器宽度,可以使用百分比单位或者媒体查询(media queries)来调整元素的大小。 ```css #slider { width: 100%; position: relative; } #slider img { position: absolute; left...
1.autoSize="true" 让div自适应大小 可选值true false 默认false 2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093...
对于iframe而言,这意味着需要一种机制使其能够根据内部内容的变化或者外部容器的尺寸变化来自动调整自己的高度,从而避免出现滚动条或者内容被裁剪的情况。 ### 实现原理 自动调整iframe高度的核心在于监听页面...
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。 利用js来实现...
`font-size:12px`定义了字体大小,`word-break:break-all`确保单词在超过容器宽度时可以换行,`width:100%`使得文本宽度等于其父元素(即`<td>`)的宽度,`overflow:auto`则保证了当内容超出容器时,可以通过滚动查看...
在现代网页设计中,为了给用户提供更丰富的视觉体验,常常需要让背景图片能够自适应浏览器的分辨率大小,并且在不同的设备和分辨率下自动拉伸以实现全屏效果。这里我们要探讨的关键知识点是如何通过HTML和CSS代码...
然而,在实际应用中,尤其是在处理不同屏幕尺寸的设备时,如何使layer弹出层自适应页面大小成为了一个常见的挑战。本文将深入探讨这个问题,并提供一种解决策略。 首先,问题的核心在于,当layer弹出层的面积设定为...