- 浏览: 782389 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (360)
- Java (101)
- JPA/Hibernate (10)
- Spring (14)
- Flex/BlazeDS (37)
- Database (30)
- Lucene/Solr/Nutch (0)
- Maven/Ant (25)
- CXF/WebService (3)
- RPC/RMI/SOAP/WSDL (1)
- REST (6)
- TDD/BDD/JUnit (1)
- Servlet/JSP (2)
- AI/MachineLearning (3)
- Resource (1)
- 字符编码 (2)
- OOA/OOPS/UML (5)
- DesignPattern (8)
- 算法与数据结构 (11)
- Web&App Server (13)
- 并发&异步&无阻塞 (7)
- Entertainment (4)
- JavaScript/ExtJS (45)
- CodeStyle&Quality (1)
- svn/git/perforce (8)
- JSON (2)
- JavaScriptTesting (4)
- Others (6)
- RegularExpression (2)
- Linux/Windows (12)
- Protocal (2)
- Celebrities (1)
- Interview (1)
- 计算机语言 (1)
- English (2)
- Eclipse (5)
- TimeZone/时区 (1)
- Finance (1)
- 信息安全 (1)
- JMS/MQ (2)
- XSD/XML/DTD (3)
- Android (4)
- 投资 (3)
- Distribution (3)
- Excel (1)
最新评论
-
qdujunjie:
如果把m换成具体的数字,比如4或者5,会让读者更明白
m阶B树中“阶”的含义 -
java-admin:
不错,加油,多写点文章
关于Extjs的mixins和plugin -
xiehuaidong880827:
你好,我用sencha cmd打包完本地工程后,把app.js ...
ExtJS使用Sencha Cmd合并javascript文件为一个文件 -
KIWIFLY:
lwpan 写道inverse = "true&qu ...
Hibernate中什么时候使用inverse=true -
luedipiaofeng:
good
消除IE stop running this script弹出框
FlashBuilder编译后自动生成的xx.html里面定义了浏览器如何显示滚动条。
自动生成的html页面里有如下样式定义:
当Flex Application的高度小于浏览器的高度时,会有一个灰色不可用的滚动条。
当Flex Application的高度大于浏览器的高度时,会出现两个滚动条。
为什么会有两个滚动条呢?
外层滚动条:
默认情况下html的滚动条是会出现的,只不过是灰色不可用状态。
内层滚动条:
body的overflow设为auto,当内容超过浏览器高度时,body的滚动条就会出现。
所以在这里,外层的滚动条基本上是没有意义的,应该手动隐藏,body的设为auto。
添加一行html{ overflow:hidden; }即可变成一个滚动条。当Flex的Application的高度高于浏览器的高度时,出现的滚动条是属于body的,我们只需关闭html的滚动条并设置body{margin:0,padding:0}即可保证只出现body的滚动条并且没有多余的空隙。
解释:
html, body { height:100%; }是为了兼容各个浏览器。
IE 处于非标准模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度,这样的话可以使布局适应浏览器窗口大小。
窗体 》body》div (html ,body {overflow:scroll} 一层滚动条)
但是当处于标准模式时,body以html标签为高度参照,html标签以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕,还要使得 html 100%使得 html获得窗口大小才行。
窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到)
当Flex程序的内容高度大于浏览器的高度时,如何使浏览器出现滚动条呢?
如果Application标签下的子内容整体高度或宽度超过了浏览器的高度(浏览器最大化时则为屏幕最佳分辨率),我们期望浏览器出现滚动条来显示所有内容,那么你必须给Application的width和height属性显示赋值,当然该值应该是大于浏览器高度的,或者大于竖向分辨率。如果你设置Applicatioin的width=100%和height=100%或者不显示赋值,那么代表的意思都是Application的width和height与浏览器的窗口的width和height一致,那么当然是不会出现滚动条的,这时一个屏幕显示不了的内容就没有办法看到了。
案例:
假设你的屏幕分辨率是1024x768,浏览器全屏显示(此时768即为浏览器高度),
如果Application下有两个Panel,
Panel1 height=500,
Panel2 height=400,
因为500+400>768,
1) 如果你将Application的height设为大于等于900,则浏览器会出现body的滚动条,你可以通过滚动条看到两个Panel的所用内容;
2) 如果你将Application的height设为小于900,但大于768,则浏览器会出现滚动条,但是即使滑动滚动条,你也不能看到Panel2的所用内容,因为Application的高度小于内容的高度900;
3) 如果你将Application的高度设为小于768,那么你既看不到浏览器body的滚动条,也不可能看到所用的内容,超出Application高度的内容直接不显示,所以你没有办法看到。
如何让Flex程序友好的支持不同的屏幕尺寸或屏幕分辨率?
友好: 任何时候都能看到所有内容
问题:
如果Flex程序中的组件既有用百分比表示的,也有用绝对值pixel表示的,那么当将程序在某一特定分辨率调试好后,比如1600x1200,在另一低分辨率下浏览比如1024x768,你可能会发现有一部分内容看不到,而且也没有滚动条(包括浏览器滚动条和组件的滚动条)出现,让你滑动滚动条来浏览显示不下的内容。原因是绝对值定义的组件会保持大小不变,但是当屏幕尺寸变小时,那些用百分比设置的组件可能会没有足够剩余的空间分配,所以显示不出来。
解决方案建议:
1)Flex程序里的高度和宽度都用百分比表示,这样会自动缩放,只是当屏幕很小时,组件会变得很小,难以操作。这种方式下浏览器的滚动条是不会出现的。
2)Flex组件设置具体的宽度和高度,让浏览器在屏幕小时出现滚动条。为了能够做到这一点,你必须显示的设置具体的值给Application标签以及Flex组件(最好是所有组件,如果部分用百分比,屏幕小时,可能分配不到足够的空间,会显示不了内容)的width和height,不能设置百分比。对于Application的宽和高设置,你可用采用简单的方式,既设置最大的屏幕分辨率,这样在小屏幕上,就会出现浏览器的body的滚动条。优点是,你可以定义每个组件的绝对高度和宽度,缺点组件不会在屏幕小时自动缩放,但是每个组件不会变形。
3)禁用浏览器的滚动条,给主要的组件和容器设置绝对的宽度和高度。这样Flex容器会自动出现Flex组件的滚动条。既可以让一部分组件缩放变形,又可以让另一部分组件始终不变形。
如何使Flex组件的父容器出现滚动条
当组件的高度超过父容器的高度时,mx自动会出现滚动条,spark组件需要自己添加scroll组件。
预备知识:
正确认识html与body 文章一
标准与非标准模式
standard模式后,定义和解析将更加严格,所有定义必须从顶级标签html开始。
可以理解为传统非standard模式定义body的用法,standard模式下都必须在html上定义。
高度100%的意义
认为standard模式下定义容器高度100%无效,是错误的理论。
如果需要body内的容器有100%高度,必须先定义body高度100%。
html与body的默认值
1. IE6.0环境下html默认有2层border的内嵌效果,FF1.5环境下默认则没有,
2. IE6.0和FF1.5环境下的body都有一定的margin值
3. IE6.0环境下html默认就是100%高度,body则不是;FF1.5环境下html和body高度默认都不是100%,需要自定义。
一般情况下统一默认的方案:
html { height:100%; border:0;}body { height:100%; margin:0;}
滚动条的设置
可以这么认为,非standard模式页面的默认滚动条是body的,而standard则是html的。
standard模式下的body默认就没有滚动条,只是html下级的一个容器而已,这样定义会看的更清楚:
定位参照
html { background:#ccc; height:100%; border:0; overflow:scroll;}body { background:#f00; height:100%; margin:0; overflow:scroll;}
相同的道理,standard模式下当使用position方法的时候,其定位参照肯定是html,而不是非standard模式的body。
根据这个特性很容易把层覆盖在body上
参考文档:http://www.alixixi.com/web/a/2008040144652.shtml
正确认识html与body 文章二
1)在Firefox、Chrome中,DOCTYPE为XHTML 1.0 Strict下默认html和body的高度是根据内容定,在body下设置一个高度为height:100%的div并不会充满整个浏览器窗口,必须同时设置html和body的高度为100%方可使该div充满整个浏览器窗口
2)body的overflow默认值:ie6下overflow-y=scroll,overflow-x=auto;Firefox、Chrome默认均为auto. 因此如果不设置body的overflow,默认状态下ie6就会显示不合理的垂直滚动条,设overflow=auto或hidden均可解决
3)各种浏览器body的margin都不是0,因此要保证div100%高并且正好充满整个窗口,须将body的margin设为0
4)手动调整浏览器的高度时:
4-1)如果div的overflow=auto:该div会自动保持100%的高度。当窗口缩小到小于div内容的高度时,div就会出现滚动条, 这时不管body的overflow=auto或hidden,均不会出现body的滚动条。
4-2)如果div的overflow=hidden:该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的,该div内的溢出 部分内容均会隐藏掉,这时不管body的overflow=auto或hidden,也不会出现body的滚动条。
4-3)如果div的overflow=scroll:该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的,永远都出现滚动条, 这时不管body的overflow=auto或hidden,均不会出现body的滚动条。
4-4)如果div的overflow没有设置或设为visible:Firefox、Chrome、Safari的行为是一至的,该div会自动保持100%的高度,div内的溢出部分内 容会溢出显示,当窗口高度小于div的内容高度时,若body的overflow=auto,就会出现body的滚动条。IE6则比较怪异,在 窗口高度不小于div内容的高度时,该div会自动保持100%的高度;但当窗口高度小于div内容的高度时,该div不会自动保持 100%的高度,而是等于内容的高度不再变,内容不会出现溢出效果,此时若body的overflow=auto,就会出现body的滚动条。
总结:html和body的高度设为100%,body设margin=0、overflow=hidden,div设overflow=auto,各浏览器表现一至,效果最佳
自动生成的html页面里有如下样式定义:
<style type="text/css" media="screen"> html, body { height:100%; } body { margin:0; padding:0; overflow:auto; text-align:center; background-color: #ffffff; } object:focus { outline:none; } #flashContent { display:none; } </style>
当Flex Application的高度小于浏览器的高度时,会有一个灰色不可用的滚动条。
当Flex Application的高度大于浏览器的高度时,会出现两个滚动条。
为什么会有两个滚动条呢?
外层滚动条:
默认情况下html的滚动条是会出现的,只不过是灰色不可用状态。
内层滚动条:
body的overflow设为auto,当内容超过浏览器高度时,body的滚动条就会出现。
所以在这里,外层的滚动条基本上是没有意义的,应该手动隐藏,body的设为auto。
添加一行html{ overflow:hidden; }即可变成一个滚动条。当Flex的Application的高度高于浏览器的高度时,出现的滚动条是属于body的,我们只需关闭html的滚动条并设置body{margin:0,padding:0}即可保证只出现body的滚动条并且没有多余的空隙。
解释:
html, body { height:100%; }是为了兼容各个浏览器。
IE 处于非标准模式时,body以窗口为高度参照,body设置为100%就可以使得页面和窗口一样高,body里面的嵌套div也可以扩展到窗口高度,这样的话可以使布局适应浏览器窗口大小。
窗体 》body》div (html ,body {overflow:scroll} 一层滚动条)
但是当处于标准模式时,body以html标签为高度参照,html标签以窗口为参照,所以仅仅body 100%,并不能使它的子div100% 占据整个屏幕,还要使得 html 100%使得 html获得窗口大小才行。
窗体》html》body》div (html ,body {overflow:scroll} 两层滚动条 ,html的滚动条从来不会用到)
当Flex程序的内容高度大于浏览器的高度时,如何使浏览器出现滚动条呢?
如果Application标签下的子内容整体高度或宽度超过了浏览器的高度(浏览器最大化时则为屏幕最佳分辨率),我们期望浏览器出现滚动条来显示所有内容,那么你必须给Application的width和height属性显示赋值,当然该值应该是大于浏览器高度的,或者大于竖向分辨率。如果你设置Applicatioin的width=100%和height=100%或者不显示赋值,那么代表的意思都是Application的width和height与浏览器的窗口的width和height一致,那么当然是不会出现滚动条的,这时一个屏幕显示不了的内容就没有办法看到了。
案例:
假设你的屏幕分辨率是1024x768,浏览器全屏显示(此时768即为浏览器高度),
如果Application下有两个Panel,
Panel1 height=500,
Panel2 height=400,
因为500+400>768,
1) 如果你将Application的height设为大于等于900,则浏览器会出现body的滚动条,你可以通过滚动条看到两个Panel的所用内容;
2) 如果你将Application的height设为小于900,但大于768,则浏览器会出现滚动条,但是即使滑动滚动条,你也不能看到Panel2的所用内容,因为Application的高度小于内容的高度900;
3) 如果你将Application的高度设为小于768,那么你既看不到浏览器body的滚动条,也不可能看到所用的内容,超出Application高度的内容直接不显示,所以你没有办法看到。
如何让Flex程序友好的支持不同的屏幕尺寸或屏幕分辨率?
友好: 任何时候都能看到所有内容
问题:
如果Flex程序中的组件既有用百分比表示的,也有用绝对值pixel表示的,那么当将程序在某一特定分辨率调试好后,比如1600x1200,在另一低分辨率下浏览比如1024x768,你可能会发现有一部分内容看不到,而且也没有滚动条(包括浏览器滚动条和组件的滚动条)出现,让你滑动滚动条来浏览显示不下的内容。原因是绝对值定义的组件会保持大小不变,但是当屏幕尺寸变小时,那些用百分比设置的组件可能会没有足够剩余的空间分配,所以显示不出来。
解决方案建议:
1)Flex程序里的高度和宽度都用百分比表示,这样会自动缩放,只是当屏幕很小时,组件会变得很小,难以操作。这种方式下浏览器的滚动条是不会出现的。
2)Flex组件设置具体的宽度和高度,让浏览器在屏幕小时出现滚动条。为了能够做到这一点,你必须显示的设置具体的值给Application标签以及Flex组件(最好是所有组件,如果部分用百分比,屏幕小时,可能分配不到足够的空间,会显示不了内容)的width和height,不能设置百分比。对于Application的宽和高设置,你可用采用简单的方式,既设置最大的屏幕分辨率,这样在小屏幕上,就会出现浏览器的body的滚动条。优点是,你可以定义每个组件的绝对高度和宽度,缺点组件不会在屏幕小时自动缩放,但是每个组件不会变形。
3)禁用浏览器的滚动条,给主要的组件和容器设置绝对的宽度和高度。这样Flex容器会自动出现Flex组件的滚动条。既可以让一部分组件缩放变形,又可以让另一部分组件始终不变形。
如何使Flex组件的父容器出现滚动条
当组件的高度超过父容器的高度时,mx自动会出现滚动条,spark组件需要自己添加scroll组件。
预备知识:
正确认识html与body 文章一
标准与非标准模式
standard模式后,定义和解析将更加严格,所有定义必须从顶级标签html开始。
可以理解为传统非standard模式定义body的用法,standard模式下都必须在html上定义。
高度100%的意义
认为standard模式下定义容器高度100%无效,是错误的理论。
如果需要body内的容器有100%高度,必须先定义body高度100%。
html与body的默认值
1. IE6.0环境下html默认有2层border的内嵌效果,FF1.5环境下默认则没有,
2. IE6.0和FF1.5环境下的body都有一定的margin值
3. IE6.0环境下html默认就是100%高度,body则不是;FF1.5环境下html和body高度默认都不是100%,需要自定义。
一般情况下统一默认的方案:
html { height:100%; border:0;}body { height:100%; margin:0;}
滚动条的设置
可以这么认为,非standard模式页面的默认滚动条是body的,而standard则是html的。
standard模式下的body默认就没有滚动条,只是html下级的一个容器而已,这样定义会看的更清楚:
定位参照
html { background:#ccc; height:100%; border:0; overflow:scroll;}body { background:#f00; height:100%; margin:0; overflow:scroll;}
相同的道理,standard模式下当使用position方法的时候,其定位参照肯定是html,而不是非standard模式的body。
根据这个特性很容易把层覆盖在body上
参考文档:http://www.alixixi.com/web/a/2008040144652.shtml
正确认识html与body 文章二
1)在Firefox、Chrome中,DOCTYPE为XHTML 1.0 Strict下默认html和body的高度是根据内容定,在body下设置一个高度为height:100%的div并不会充满整个浏览器窗口,必须同时设置html和body的高度为100%方可使该div充满整个浏览器窗口
2)body的overflow默认值:ie6下overflow-y=scroll,overflow-x=auto;Firefox、Chrome默认均为auto. 因此如果不设置body的overflow,默认状态下ie6就会显示不合理的垂直滚动条,设overflow=auto或hidden均可解决
3)各种浏览器body的margin都不是0,因此要保证div100%高并且正好充满整个窗口,须将body的margin设为0
4)手动调整浏览器的高度时:
4-1)如果div的overflow=auto:该div会自动保持100%的高度。当窗口缩小到小于div内容的高度时,div就会出现滚动条, 这时不管body的overflow=auto或hidden,均不会出现body的滚动条。
4-2)如果div的overflow=hidden:该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的,该div内的溢出 部分内容均会隐藏掉,这时不管body的overflow=auto或hidden,也不会出现body的滚动条。
4-3)如果div的overflow=scroll:该div会自动保持100%的高度。Firefox、Chrome、Safari、ie6的行为是一至的,永远都出现滚动条, 这时不管body的overflow=auto或hidden,均不会出现body的滚动条。
4-4)如果div的overflow没有设置或设为visible:Firefox、Chrome、Safari的行为是一至的,该div会自动保持100%的高度,div内的溢出部分内 容会溢出显示,当窗口高度小于div的内容高度时,若body的overflow=auto,就会出现body的滚动条。IE6则比较怪异,在 窗口高度不小于div内容的高度时,该div会自动保持100%的高度;但当窗口高度小于div内容的高度时,该div不会自动保持 100%的高度,而是等于内容的高度不再变,内容不会出现溢出效果,此时若body的overflow=auto,就会出现body的滚动条。
总结:html和body的高度设为100%,body设margin=0、overflow=hidden,div设overflow=auto,各浏览器表现一至,效果最佳
发表评论
-
Panel高度为0但里面的组件依旧显示
2013-04-24 14:34 1078解决办法: 把Panel中的内容组件用<s:Scroll ... -
约束布局constraint layout
2013-03-01 14:02 1781约束布局constraint layout要点: 1)只有支持 ... -
根据屏幕分辨率动态调整组件大小
2013-02-22 17:34 1507将代码写在组件的preInitialize事件监听器里面 简化 ... -
设置Flex组件的尺寸大小
2013-02-21 16:17 1526深红色部分标明了需注意的地方 另外要注意组件和容器的生命周 ... -
Flex minWidth minHeight
2013-02-04 16:17 1510minWidth 这个值并不是给组件自己用的,而是给组件的父容 ... -
ActionScript遍历绑定(BindProperty,BindSetter,ChangeWatcher)
2013-02-01 10:11 2438注意: 为防止内存益处,记得调用watcherInstance ... -
FlexContext, FlexClient,FlexSession
2013-01-15 15:05 2358使用了BlazeDS后,可以从FlexContext中获取一系 ... -
防止RemoteObject批处理AMF消息
2013-01-14 17:01 1249问题描述: 如果你在短时内调用同一个java对象上的两个方法, ... -
自动检测http和https的RemoteObject
2013-01-13 10:30 1723package { import util.Bro ... -
flex浏览器相关辅组类
2012-12-06 13:39 1245package util { import flash. ... -
Flex可变参数带来的问题
2012-12-06 13:34 1477当你在flex的方法中用了可变参数后,你会发现这些参数传到ja ... -
flex如何通过类名称实例化对象
2012-11-30 13:52 2720Getting the class from an objec ... -
flexlib的treeGrid用法
2012-11-30 13:46 1257为了使用treeGrid,通常你需要定义自己的DataDesc ... -
自定义flex tree的DataDescriptor
2012-11-30 13:42 1396public class EnvironmentDataDes ... -
关于Boolean类型在flex与java中间传递的问题
2012-11-30 13:38 1245/** *为简化,只列举两个字段 */ publi ... -
给Flex的Tree赋值方式(XML和ArrayCollection)
2012-11-30 09:33 40131)方式一,mxml内嵌xml数据赋值方式,Embedded ... -
Custom Alert
2012-11-26 19:21 0<?xml version="1.0&qu ... -
Flex服务端分页
2012-11-14 17:00 1043Structure: model event ... -
Flex可携带数据的Aler组件(DataCarriableAlert)
2012-11-14 16:52 1304package component.alert { ... -
映射flex类到java内部类
2012-11-14 16:05 1165java端 public class Person{ p ...
相关推荐
flex三种实现滚动条方式,其实是两种,样式的以两种表现形式写出了。然后,自定了一个滚动条
自定义滚动条.用canvas做滚动条条 用button做滑块
通过修改flex4滚动条的皮肤来修改Scroller组件的外观,外观直接去除了上下箭头,可以自行改变滚动条的皮肤颜色,投影颜色等。滚动条更加现代化。
flex横向条形图增加滚动条,拖动滚动条显示数据
flex tree 自动显示横向滚动条 自定义重写
Flex 按钮代替滚动条,看了就知道了。。
flex textlayout 滚动条 flex textlayout 滚动条 flex textlayout 滚动条
很好的解决了flex的tilelist中的checkbox 选中后,下拉滚动条乱选问题。同时解决了获取tilelist里面的数据问题。很不错的
Flex中不用ScrollBar实现滚动效果
学习Flex.flex源程序,很好的啊。
sfapi 可以expose flex应用程序的控件,以便测试程序通过执行js方法调用而操作flex界面控件
使用 Flex 和 Flash Builder 开发手机应用程序 目录 第 1 章: 入门 手机应用程序入门 手机、桌面和浏览器应用程序开发的差异 第 2 章: 开发环境 在 Flash Builder 中创建 Android 应用程序 在 Flash Builder 中...
解决了鼠标在flexpaper上的时候,滚动条上的bug
小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 FlexLayout布局 (代码+截图)小程序源码 Flex...
微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小程序 FlexLayout布局 (源码)微信小...
FLEX连续向左滚动字幕,可用于作公告栏展示。
讲解flex4垂直滚动条运用,适用于初学者,简单易懂
这是一本入门级的Flex电子书,适合入门的朋友看!
Flex与ActionScript3程序开发》一书由易到难、由浅人深、循序渐进地介绍了Flex与ActionScript3程序开发的一般步骤与常用的程序技巧,内容通俗易懂,使用大量实例贯穿全书,力求以实战的形式让读者快速掌握知识点。...
Adobe Flex 4.5 发行版将 Flex 和 Adobe Flash Builder 带给智能手机和平板电脑。现在,利用 Adobe AIR,可以像在桌面 平台上一样在 Flex 中轻松而高质量地开发手机应用程序。 许多现有的 Flex 组件已扩展到移动设备...