如何混合 100% 高度和最小高度答案

【问题标题】：How to mix 100% height with a minimum height如何混合 100% 高度和最小高度
【发布时间】：2010-09-03 20:06:53
【问题描述】：

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

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

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

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

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

有没有 CSS 方法可以做到这一点？如果不能，有人能告诉我如何跟踪所有浏览器的浏览器可视区域吗？

【问题讨论】：

绝对不是 CSS - 尽管有 min-height 和 min-width 属性，但它们不是为此而生的。

标签： javascript html css

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

【讨论】：