FLEX：给页面添加滚动条

来源：互联网发布：photo域名编辑：程序博客网时间：2024/06/09 20:10

修改index.template.html，加入一段js获取浏览器窗口的宽高，根据浏览器窗口宽高修改css样式，html, body { height:100%; width:100%; }的height和width是百分比还是具体大小，当是具体大小时就会出现滚动条，当是百分比时就会充满整个窗口。

具体如下：
1.加入以下js原码(Application大小为1100X600)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
varwinWidth = 0;
 varwinHeight = 0;
 functionfindDimensions()
 {
  //获取窗口宽度
  if(window.innerWidth)
  {
   winWidth = window.innerWidth;
  }
  elseif ((document.body) && (document.body.clientWidth))
  {
   winWidth = document.body.clientWidth; //获取窗口高度
  }
  if(window.innerHeight)
  {
   winHeight = window.innerHeight;
  }
  elseif ((document.body) && (document.body.clientHeight))
  {
   winHeight = document.body.clientHeight;
  }
  //通过深入Document内部对body进行检测，获取窗口大小
  if(document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
  {
  winHeight = document.documentElement.clientHeight;
  winWidth = document.documentElement.clientWidth;
  } 
 
  varcssSize = document.styleSheets[0].rules||document.styleSheets[0].cssRules;
  if(winWidth < 1100)
  {
  cssSize[0].style.width = "1100px";
  }
  else
  {
  cssSize[0].style.width = "100%";
  }
 
  if(winHeight < 600)
  {
  cssSize[0].style.height = "600px";
  }
  else
  {
  cssSize[0].style.height = "100%";
  }
 }
 
 window.onresize=findDimensions; 
 
 functionpageInit() {
    //调用函数，获取数值
   findDimensions();

 }

原文：http://www.wbgen.com/blog/flex4%E8%AE%A9%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E5%B0%8F%E4%BA%8Eapplication%E5%A4%A7%E5%B0%8F%E6%97%B6%E5%87%BA%E7%8E%B0%E6%BB%9A%E5%8A%A8%E6%9D%A1