Comment mélanger 100% de hauteur avec une hauteur minimum

Mon problème est simple, la solution ne semble pas particulièrement évidente.Comment mélanger 100% de hauteur avec une hauteur minimum

J'ai un site Flash. Actuellement, l'objet Flash occupe tout le navigateur et est défini sur width/height = 100%. C'est bien jusqu'à ce que quelqu'un rétrécisse leur navigateur.

Y at-il un moyen de définir quelque chose comme ceci.

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

x et y étant la dimension minimale que le site doit afficher correctement.

Existe-t-il un moyen CSS de le faire? Si non, certains pourraient me dire comment garder une trace de la zone visible des navigateurs dans tous les navigateurs?

Source

2010-09-03 JasonS

Certainement pas CSS - bien qu'il y ait un 'min-height' et propriété' min-width', ceux qui ne sont pas destinés à cette . –

Tant que x et y sont connus, vous pouvez le faire en mettant min-height et min-width sur l'élément qui contient votre objet flash:

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

Et le 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 */ 
}

Comme pour garder une trace de la zone visible cross-browser, je recommande d'utiliser une bibliothèque Javascript comme jQuery. Il est très facile de capturer l'événement resize la fenêtre, puis agir sur elle:

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

Source

2010-09-03 12:06:53 Pat

Comment mélanger 100% de hauteur avec une hauteur minimum

Répondre

Questions connexes