Question

我的问题很简单，但解决方案似乎并不是特别明显。

我有一个Flash网站。目前，Flash对象占用整个浏览器并设置为width/height = 100%。这很好，直到有人缩小他们的浏览器。

有没有办法设置这样的东西。

height = (browser_height < y) ? y : 100%;
width = (browser_width < x) ? x : 100%;

x和y是网站需要正确显示的最小尺寸。

有没有CSS方法可以做到这一点？如果没有，有人可以告诉我如何在所有浏览器中跟踪浏览器可查看区域吗？

Answer 1

只要知道x和y，您就可以通过在包含Flash对象的元素上设置min-height和min-width来实现此目的：

<body>
    <div id="flastObj">
        flash object code here
    </div>
</body>

CSS：

/* 100% height only works if the element's direct parent (body in 
   this example) also has a height specified */
html, body, #flashObj {
    height: 100%;
}

#flashObj {
    min-height: 900px; /* y value */
    min-width: 900px;  /* x value */
}

至于跟踪可浏览区域的跨浏览器，我建议使用像jQuery这样的Javascript库。它可以很容易地捕获窗口调整大小事件，然后对其进行操作：

// constant width
var x = 900;

// Bind a handler to the window's load and resize events
$(window).bind('load resize', function(){
    // $(this) is a jQuery object that represent the element (our window) 
    // that we've got the event handlers bound to.
    var newWidth = $(this).width();
    var newHeight = $(this).height();

    // Now we can act on our #flashObj element
    var flashObj = $('#flashObj');
    if(newWidth < x){
        flashObj.css({width: x});
    } 
});

如何将100％高度与最小高度混合

1 个答案: