How to mix 100% height with a minimum height
My problem is simple, the solution though doesn't seem particularly obvious.开发者_JAVA技巧
I have a Flash site. Currently the Flash object takes up the whole browser and is set to width/height = 100%. This is fine until someone shrinks their browser.
Is there a way to set something like this this.
height = (browser_height < y) ? y : 100%;
width = (browser_width < x) ? x : 100%;
x and y being the minimum dimension the site needs to display properly.
Is there a CSS way to do this? If not could some tell me how to keep track of the browsers viewable area across all browsers?
As long as x and y are known, you can do it by setting min-height and min-width on the element that contains your flash object:
<body>
<div id="flastObj">
flash object code here
</div>
</body>
And the 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 */
}
As for keeping track of viewable area cross-browser, I would recommend using a Javascript library like jQuery. It makes it very easy to capture the window resize event and then act on it:
// 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});
}
});
加载中,请稍侯......
精彩评论