Comment obtenir min-hauteur de travail dans Safari, Chrome sur MAC

J'ai une page avec le CSS suivant, il rend bien sur IE et FF, mais sur Mac dans Safari et Chrome la hauteur minimale ne semble pas fonctionner et tout le contenu s'effondre sur le dessus de l'autre lorsque la page du navigateur est courte au lieu de rester étendu et de fournir des barres de défilement:Comment obtenir min-hauteur de travail dans Safari, Chrome sur MAC

<style type="text/css"> 
    html, body { 
    height: 100%; 
     width: 100%; 
    } 
    body { 
    height: 100%; 
     width: 100%; 
     background: #000000; 
     font: 86% Arial, "Helvetica Neue", sans-serif; 
     margin: 0; 
     padding: 0px; 
     color: #CCCCCC; 
    } 
    #website_wrapper { 
     min-height: 850px; 
    min-width: 1080px; 
     height: 100%; 
     width: 100%; 
    } 
    #website { 
     height: 100%; 
     width: 100%; 
     background-color: #000000; 
     vertical-align: bottom; 
    }

toutes les idées pourquoi Safari (WebKit je suppose) ne fait pas ce qu'on lui dit de faire? Merci à l'avance ...

Source

2010-08-22 dsire

Vous avez 100% après votre min-hauteur. mais min-height est également buggé pour moi dans webkit. Je pensais juste le signaler. – meteorainer

min-height est censé être pris en charge dans Safari maintenant, mais vous voudrez peut-être essayer le underscore hack:

min-height: 850px; hauteur: auto; hauteur: 850px;

Source

2010-08-22 16:01:36

Merci HZC, mais ça ne semble pas le faire non plus ... – dsire

L'exemple suivant fonctionne pour moi sur Mac OS X 10.6.4 en utilisant Safari 5.0.1 (pas la version de Webkit):

<html> 
    <head> 
    <!-- 
     <style> 
     .box1 { 
      float: left; 
      width: 100px; 
      margin: 1em 20px 1em 0; 
      background: yellow; 
      border: 1px solid black; 
      min-height: 100px; 
     } 
    --> 
    </style> 
    </head> 
    <body> 
     <div class="box1"></div> 
     <div class="box1">less text</div> 
     <div class="box1">more text more text more text more text more text more text</div> 
    </body> 
</html>

Je ne peux pas dire de votre exemple comment vous implémentez vos styles car vous montrez seulement vos définitions de style. Une autre chose que j'ai remarquée est que vous définissez des styles d'identification (# notation) au lieu de styles de classe (notation par points). Bien que cela fonctionne également, c'est recommended que vous définissez des styles de classe lorsque vous souhaitez appliquer un style à plusieurs éléments.

Si cet exemple ne vous aide pas, vous pouvez peut-être coller du code HTML indiquant COMMENT vous utilisez vos styles.

Source

2010-08-24 12:41:01

Cela m'a aidé, merci! @meteorainer Juste dire que ce problème est aussi buggé car vous devriez vraiment être un commentaire à la question au lieu d'une réponse: [SO FAQ - sur les réponses qui sont "merci!" ou "moi aussi!" réponses] (http://stackoverflow.com/faq#deletion) – chown

Pour une raison quelconque, je rencontre un problème similaire, où ma barre de navigation sur Safari est une hauteur différente des autres navigateurs.

Pour résoudre ce problème, je l'ai utilisé min-height: initial

J'ai aussi enveloppé ce dans un milieu spécifique safari requête, afin d'éviter d'éventuels conflits:

is there a css hack for safari only NOT chrome?

Source

2016-03-08 12:53:49 endymion1818

Comment obtenir min-hauteur de travail dans Safari, Chrome sur MAC

Répondre

Questions connexes