CSS3 calc() ne fonctionne pas avec position fixe/absolue

Quelqu'un sait-il une solution pour cela?

Je suis en train de calculer la largeur de la div :

#container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: none;
    background: #fff;
    width: calc(100% - 1em);
    padding: .5em;
}
  • Je ne peux pas répondre à votre question, mais s'il vous plaît noter qu'il est beaucoup plus facile pour vous aider si vous postez votre code et des précisions sur votre problème.
InformationsquelleAutor Morpheus | 2012-10-29
  1. 4

    EDIT 2:

    C'est la version pour les navigateurs Webkit (comme demandé dans les commentaires), testé avec la dernière version de Chrome, et entièrement de travail pour moi: http://jsfiddle.net/HvVst/1/

    utilisé -webkit-calc() au lieu de calc().

    EDIT: Alors, vous devez soustraire la 1px frontières de l'0.5 em rembourrage, comme ceci:
    http://jsfiddle.net/HvVst/

    HTML:

    <div id="banner">
   FIXED HEADER
</div>
<div id="main">
    normal div
    <br/>
    Sample Text 1
    <br/>
    Sample Text 2
    <br/>
    Sample Text 3
    <br/>
    Sample Text 4
    <br/>
    Sample Text 5
    <br/>
    Sample Text 6
    <br/>
    Sample Text 7
    <br/>
    Sample Text 8
</div>

    CSS:

    #banner{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background: #fff;
    width: calc(100% - 1em);
    padding: calc(0.5em - 1px); /* <-- THIS ONE !!*/
    border: 1px solid red;
    height: 50px;
}

#main{
    margin-top: calc(50px + 1em);
    border: 1px solid blue;
    height: 500px;
}

    Il fonctionne avec position fixe/absolue, mais (si aucun parent parents spécifié pour absolue, et toujours pour le fixe), il se réfère à la largeur de la fenêtre, pas à la largeur du conteneur.

    (100% - cadratin (1 em) = 100% de la fenêtre à l'exclusion de la barre de défilement...

    qu'essayez-vous de réaliser ?

    Si vous voulez que la position absolue dans le parent de limites, définir le parent de position:relative...

    • Je veux que la div à 100% de largeur et j'ai besoin de moins cadratin (1 em de rembourrage, de sorte qu'il ne déborde pas de corps, si cela fait sens. Il doit être fixé en tant que bien, parce que je le veux à s'asseoir sur le haut de la page. Il n'y a pas de point pour définir parent de l'élément en position relative dans ce cas.
    • Il ressemble navigateurs webkit ne fonctionne pas avec cette. Merci!!!! P. s. Désolé, ne peut pas voter de votre réponse alors que je suis nouveau ici.
    • Désolé je l'ai testé avec Firefox, vous n'avez pas mentionné "les navigateurs Webkit" 🙂 Pour les navigateurs webkit, il suffit d'utiliser "-webkit-calc(100% - cadratin (1 em);" au lieu de "calc(100% - cadratin (1 em);", faire de la substitution pour chaque calc() utilisé. Vous ne pouvez pas voter, mais vous pouvez toujours marquer comme Accepté de Répondre, si vous pensez que c'est la bonne réponse.
    • J'ai essayé -webkit-calc(), mais pas de chance. J'espère que ce sera pris en charge dans un futur proche 🙂 pour l'instant jQuery aidera
    • Mmm... qu'est-ce que vous utilisez ? Je n'ai pas Chrome, ni Safari installé donc je ne peux pas essayer, btw, vous pouvez tester -webkit-calc ici: peter.sh/files/calc.html. Peut-être qu'il ne prend totalement en charge les soustractions, mais il me semble étrange.
    • J'ai édité la réponse, je l'ai testé avec chrome et ça fonctionne 🙂
    • Fonctionne comme un charme 🙂 Merci beaucoup 🙂

    InformationsquelleAutor Andrea Ligios