div滚动框，自适应大小 - yelr_j - ITeye博客

`

yelr_j

浏览: 67512 次
性别:
来自: 成都

最近访客更多访客>>

cefei2010

liuzhiqiang19890403

fxj123

521冰521

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

jianqiangking：
java实现从ftp服务器上下载文件
jianqiangking：请问fileUrl的值怎么写？
java实现从ftp服务器上下载文件
jianqiangking：请问fileUrl 属性的值怎么写？
java实现从ftp服务器上下载文件
qgyang：刚好碰到这种问题，非常感谢!
一个服务器中配置多个tomcat
wangacidlemon：实际运用中这个书写代码的方式是不被推荐的。继承应当是继承抽象类 ...
父类子类的初始化顺序问题

div滚动框，自适应大小

博客分类：

javascript学习

阅读更多

在最近的项目中需要在页面展示许多的字段信息（不下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>

分享到：

hibernate集合映射inverse和cascade详解 | B/S中实时导出excel

2009-07-01 10:37
浏览 1838
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

首页滚动图片自适应源码模板: 【首页滚动图片自适应源码模板】是一种网页设计中常见的元素，主要应用于网站首页，用于以动态滚动的方式展示多张图片，以增加视觉效果和用户体验。这种模板通常包含HTML、CSS和JavaScript三个主要部分，使得图片...

jquery图片浏览自适应大小: "jQuery图片浏览自适应大小"是一个技术解决方案，旨在优化用户体验，确保图片在不同设备和屏幕尺寸下都能以最佳方式展示。这个话题涉及到JavaScript库jQuery的使用，以及响应式设计的一些基本原理。首先，jQuery是...

jQuery网页自适应屏幕图片滚动切换: 在这个项目中，“jQuery网页自适应屏幕图片滚动切换”就是利用jQuery实现的一种响应式图片轮播技术。首先，我们来理解“自适应”（Responsive）的概念。自适应网页设计意味着网页可以根据用户设备的屏幕大小和方向...

jquery实现区块或链接横向无缝循环滚动，自适应宽度，可随意设置外容器的宽度高度自适应，兼容IE，FF，CHROME.rar: 7. **HTML文件"div滚动 - 副本.html"**：这个文件很可能是项目的示例页面，包含了HTML结构和jQuery脚本的引用，用于演示横向无缝滚动效果。通常，HTML文件会包含一个容器div，里面包含要滚动的子元素，以及可能的CSS...

HTML中使背景图片自适应浏览器大小.docx: 这个解决方案可以实现背景图片的自适应浏览器大小，并且可以在背景图片需要滚动条的情况下使用。例如： ```html <div id="bg"></div> ``` ```css #bg { position: fixed; top: 0; left: 0; width: 100%; ...

JS控制DIV自适应高度: `，当内容超出div的原始尺寸时，会自动出现滚动条。然而，这种方法不适用于所有情况，特别是当需要精确控制div高度时。 2. **JS监听内容变化**：可以使用JavaScript的事件监听器，如`MutationObserver`，来检测div...

jQuery自适应大小焦点图.zip: 《jQuery自适应大小焦点图：实现与应用》在网页设计中，焦点图或幻灯图是一种常见的元素，用于展示一组图片并引导用户关注特定内容。"jQuery自适应大小焦点图"是专为此目的设计的JavaScript插件，它能够根据图片的...

div不能自适应高度不能随图片的高度变化: 如果图片的高度始终没有超出<div>的高度，那么即使设置了overflow:auto，<div>也不会有滚动条，也就无法显示其自适应高度的效果。 2. 使用CSS的Flexbox布局： Flexbox布局是一种更为先进和灵活的布局方式，它能更...

外部DIV如何强制宽度不被内部DIV撑开: 在本例中，内部`<div>`的宽度超过了外部`<div>`，但是由于设置了`overflow: auto`，外部`<div>`的宽度没有改变，并且添加了滚动条供用户滚动查看。 ### 结论通过设置外部`<div>`的`overflow`属性为`hidden`或`...

自适应表格，适用于PC，手机同一页面: 自适应图片则根据设备屏幕大小自动调整图片尺寸，防止过度加载。标签"表格自适应手机平板"暗示了这个主题的重点是针对手机和平板设备优化。在手机上，由于屏幕尺寸小，可能需要将表格的每一列单独显示，或者将长...

JQuery手势滑动自适应宽度BANNER_手机版: 1. **媒体查询（Media Queries）**：利用CSS3的媒体查询可以实现响应式布局，根据设备的视口宽度调整BANNER的大小。例如，设置`width: 100%;`确保BANNER始终填满其父容器。 2. **百分比单位**：BANNER内图片或元素的...

jquery BS,dialog控件自适应大小: 在IE浏览器中，div的宽度似乎并不会根据内部内容动态变化，导致offsetWidth属性取得的宽度值过大，从而使得自适应大小的实现失败。为了解决这个问题，文章提到了EXT框架的实现方式，其内部使用了span等随内容变化...

jQuery CSS3图片滑动切换_自适应浏览器宽度图片滑动切换: 同时，为了使滑动切换自适应浏览器宽度，可以使用百分比单位或者媒体查询（media queries）来调整元素的大小。 ```css #slider { width: 100%; position: relative; } #slider img { position: absolute; left...

怎样让一个div高度自适应浏览器高度: 在网页设计中，让一个`div`元素的高度自适应浏览器高度是一个常见的需求，尤其是在创建全屏背景、响应式布局或者动态内容填充时。这个需求看似简单，但有时却容易让人困惑，因为仅设置`div`的高度为`100%`并不总是...

js弹出框 javascript弹出框 div+css弹出层效果弹出登录框: 1.autoSize="true" 让div自适应大小可选值true false 默认false 2.width height弹出框的长宽默认500 300 3.scrolling弹出框是否有滚动条可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色默认#7093...

嵌入到HTML的iframe自动适应大小: 对于iframe而言，这意味着需要一种机制使其能够根据内部内容的变化或者外部容器的尺寸变化来自动调整自己的高度，从而避免出现滚动条或者内容被裁剪的情况。 ### 实现原理自动调整iframe高度的核心在于监听页面...

div或img图片高度随宽度自适应的方法: 该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。利用js来实现...

CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）.docx: `font-size:12px`定义了字体大小，`word-break:break-all`确保单词在超过容器宽度时可以换行，`width:100%`使得文本宽度等于其父元素（即`<td>`)的宽度，`overflow:auto`则保证了当内容超出容器时，可以通过滚动查看...

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码: 在现代网页设计中，为了给用户提供更丰富的视觉体验，常常需要让背景图片能够自适应浏览器的分辨率大小，并且在不同的设备和分辨率下自动拉伸以实现全屏效果。这里我们要探讨的关键知识点是如何通过HTML和CSS代码...

根据浏览器屏幕大小高度自适应: 当用户改变浏览器窗口大小时，`onresize`事件会被触发，进而更新div元素的`height`，使其等于`clientHeight`，实现高度自适应的效果。总的来说，实现浏览器屏幕大小高度自适应的关键在于理解并灵活运用`height`、`...

Global site tag (gtag.js) - Google Analytics