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

【问题标题】：Relative Positioning at bottom of the screen issue with Flex and different browsersFlex 和不同浏览器的屏幕底部相对定位问题
【发布时间】：2011-03-11 17:23:41
【问题描述】：

我有一个这样的 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 像素的边距，但这不是我想在这个应用程序中做的事情。

【问题讨论】：

标签： javascript html apache-flex flash

【解决方案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>

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

【讨论】：

这是我预期的问题所在。 Flash Player 在所有浏览器中都非常一致，因此几乎可以肯定是周围的标记问题给您带来了问题。通过确保您的 html 完全是 100% 高，没有边距或填充，假设您的 html 中没有其他内容（存在吗？），这应该始终授予 Flex 整个页面高度。如果这不能解决问题，那么您的 Flex 中的其他内容 ....... 部分可能是另一个罪魁祸首。

【解决方案2】：

您可以将输出包装在一个包含<div> 中，然后使用YUI's getClientRegion 和一个调整大小事件以更好地衡量，将包含 div 的 CSS 高度属性设置为 YUI 确定可用视口垂直空间的值。

很抱歉，该解决方案是 Flex 之外的解决方案，但它会起作用。

编辑：我的意思是“getViewportHeight()”而不是“getClientRegion()”，抱歉，请查看 APi 文档，那里有很多关于这类东西的好东西。

【讨论】：

我要试试这个。我只是希望它可以在 Flex 中完成，这样我就不必在我的代码中包含 YUI，因为 Flex 文件通常很大，可以自行下载。
公平的电话，有时我也很烦这种事情必须做。我想在这种情况下是 Flex 与 Wild（UA）。也许他们可以从他们自己的一套“浏览器集成”修复中受益——虽然我不能老实说我没有看到这个——也许他们确实有这些工具？无论如何，你需要的唯一 YUI 依赖文件是 yahoo-dom-event.js @ 37k minified - 不是太破旧。

【解决方案3】：

Flex 只是网页中的一个 Flash 组件。它的大小取决于 flex 之外的内容。除非您发布围绕 flex 应用程序的 HTML/JS 代码，否则我认为您不会得到正确的答案。

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

【讨论】：

是的。 100％的高度充其量是越野车。祝你好运。

【解决方案4】：

当您在页面中有一个或多个定位元素时，通常会发生这种情况。检查您的代码以查看您是否在代码中的其他任何地方使用了位置元素，如果是，它们是否不同，即一个相对和另一个绝对，如果是这样，这可能是您的问题，建议它们都是相同的，即都是相对的

【讨论】：