Question

我有一个像这样的flex组件：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
              ...
               width="100%"
               height="100%"
               creationComplete="init()">   
        .......
<components:NavigationBar id="nagivationBar"
                          left="0" bottom="0" />

考虑到父容器填满屏幕，这应该显示在屏幕的左下角。

我刚刚描述的行为与Safari完美展现使用Chrome时，如果下方的下载栏不可见，但下载栏的内容覆盖了底部，则会正确显示。和FireFox似乎总是隐藏在屏幕底部50像素左右。

似乎每个浏览器都以自己的方式呈现100％的高度。

您建议的最佳方法是什么？我可以在底部添加一个100像素的边距，但这不是我想在这个应用程序中做的事情。

Answer 1

在加载Flex应用程序的HTML页面的<head></head>部分尝试类似的操作：

<style type="text/css">
    html, body{ 
        width: 100%;  /* make the body expand to fill the visible window */
        height: 100%;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
        overflow: hidden;
    }

</style>

不确定它会对你的情况有所帮助，但它很容易尝试。

Answer 2

您可以将输出包装在包含<div>中，然后使用YUI's getClientRegion和resize事件进行测量，将包含div的CSS height属性设置为YUI确定可用视口的值垂直空间。

很抱歉，解决方案是Flex之外的解决方案，但它可以正常工作。

编辑：我的意思是'getViewportHeight（）'而不是'getClientRegion（）'，对不起，请查看APi文档，但是这里有很多好东西。

Answer 3

Flex只是网页中的Flash组件。它的大小取决于弹性以外的大小。除非你发布围绕flex app的HTML / JS代码，否则我认为你不会得到正确答案。

PS。根据我使用浏览器高度的经验可能会非常麻烦。

Answer 4

这通常发生在页面中有一个或多个定位元素时。检查你的代码，看看你是否在代码中的其他地方使用了position元素，如果它们不同，即一个亲戚和另一个绝对，如果是这样，这可能是你的问题，它推测它们都是相同的，即所有亲戚

Flex和不同浏览器在屏幕底部的相对定位问题

4 个答案: