Relative Positioning at bottom of the screen issue with Flex and different browsers_问答_开发者

Relative Positioning at bottom of the screen issue with Flex and different browsers

开发者 https://www.devze.com 2023-01-06 05:14 出处：网络

I have a flex component like this: <s:Application xmlns:fx=\"http://ns.adobe.com/mxml/2009\" ... 开发者_高级运维width=\"100%\"

I have a flex component like this:

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

This is supposed to show at the bottom left of the screen considering that parent container fills the screen.

The behaviour I just described shows perfectly with Safari with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it. and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.

It seems like every browser renders the 100% height in its own way.

What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.

Try something like this in the <head></head> section of the HTML page that loads your Flex Application:

<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>

Not sure it will help in your case but it's easy to try.

You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.

Sorry the solution is an outside-of-Flex one, but it'll work.

Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.

Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.

PS. From my experience working with browser height may be very troublesome.

this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative