ansaurus

Question

How to mix 100% height with a minimum height

Answer 1

+1 A:

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});
    } 
});

Pat 2010-09-03 12:06:53

ansaurus

tags:

views:

answers:

How to mix 100% height with a minimum height

related questions