web-dev-qa-db-fra.com

Alternative CSS Calc

J'essaye de changer dynamiquement la largeur d'une div en utilisant CSS et pas de jquery. Le code suivant fonctionnera dans les navigateurs suivants: http://caniuse.com/calc

/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);

Je veux aussi supporter IE 5.5 et supérieur , j'ai trouvé ce qui suit: expression. Est-ce l'utilisation correcte:

/* IE-OLD */
width: expression(100% - 500px);

Puis-je également prendre en charge Opera et le Android??)?

csscss3css-calc
67
jipje44

Presque toujours, box-sizing: border-box Peut remplacer une règle de calcul telle que calc(100% - 500px) utilisée pour la présentation.

Par exemple:

Si j'ai le balisage suivant:

<div class="sideBar">sideBar</div>
<div class="content">content</div>

Au lieu de faire ceci: (En supposant que la barre latérale ait 300 pixels de large)

.content {
  width: calc(100% - 300px);
}

Faire ceci:

.sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}
html,
body,
div {
  height: 100%;
}
.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  background: orange;
}
.content {
  padding-left: 300px;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: wheat;
}
<div class="sideBar">sideBar</div>
<div class="content">content</div>

PS: Je ne travaillerai pas dans IE 5.5 (hahahaha), mais cela fonctionnera dans IE8 +, tout mobile , et tous les navigateurs modernes ( caniuse )

démonstration de la largeur

démonstration de hauteur

Je viens de trouver cet article du blog de Paul Irish où il montre également le dimensionnement de la boîte comme une alternative possible aux expressions simples calc (): (bold is mine)

Un de mes cas d'utilisation préférés que border-box résout bien est celui des colonnes. Je souhaiterais peut-être diviser ma grille avec 50% ou 20% de colonnes, mais souhaiter ajouter un remplissage via px ou em. Sans le prochain calcul de CSS (), c’est impossible… sauf si vous utilisez border-box .

NB: La technique ci-dessus a effectivement le même aspect qu'une instruction calc () correspondante. Il y a une différence cependant. Lorsque vous utilisez une règle calc (), la valeur de la largeur de la div de contenu sera en réalité 100% - width of fixed div. Toutefois, avec la technique ci-dessus, la largeur réelle de la div de contenu correspond à la largeur complète à 100%. l'apparence de 'remplir' la largeur restante. (ce qui est probablement suffisant pour la plupart des gens qui en ont besoin ici)

Ceci dit, si est important si la largeur de la div du contenu est en fait 100% - fixed div width, Une technique différente - qui utilise des contextes de formatage de bloc - peut être utilisée (voir ici et ici pour les détails sanglants):

1) faire flotter le div de largeur fixe

2) définir overflow:hidden Ou overflow:auto Sur le contenu div

démo

116
Danield

Il suffit d'avoir un repli avant que le calcul ne fasse l'affaire.

width: 98%;               /* fallback for browsers without support for calc() */
width: calc(100% - 1em);

Voir plus ici https://developer.mozilla.org/en-US/docs/Web/CSS/calc

35
Tommy Sørensen

tilisez ceci

    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}
17
Mohamed Malik

Je viens de passer la plus grande partie de 3 heures à essayer de résoudre ce problème spécifique à un appareil Android, je ne pouvais pas utiliser le dimensionnement de la boîte, je l'ai donc lié à mon JS en tant que solution de rechange sale ... aucun jQuery n'est requis! :)

Prise de code de travail sur andriod 2.3.

<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>

JS avec les auditeurs de l'événement

var orient =
{
    orientation:window.orientation,
    width: window.innerWidth,
    check: function()
    {
        // if orientation does not match stored value, update
        if(window.orientation !== this.orientation)  
        {
            this.orientation = window.orientation; //set new orientation
            this.width = window.innerWidth; //set new width
            this.adjustIrritatingCSS(this.width); //change ui to current value
        }
        //if width does not match stored value, update
        if(window.innerWidth !== this.width)
        {
            this.width = window.innerWidth; //set new width
            this.adjustIrritatingCSS(this.width); //change ui to current value
        }
    },
    adjustIrritatingCSS: function(screenWidth)
    {   
    //disgusting workaround function
        var titleBoxes = document.getElementsByClassName('sessionDiv'); 
        var i = titleBoxes.length;
        var sessWidth = screenWidth - 300; // calc(100% - 300px); -> equivalent
        while(i--)
        {
            titleBoxes[i].style.width = String( sessWidth + "px"); 
            //resize image in auto sized div
        }
        sessWidth = null; //clear width
        titleBoxes = null; //clear nodelist
        i = null; // clear index int
    }
};

window.onload = function()
{
    window.addEventListener('resize', function(){orient.check();}); 
    //on resize, check our values for updates and if theres changes run functions
    window.addEventListener('orientationchange', function(){orient.check();});
    //on rotate, check our values for updates and if theres changes run functions
    setInterval(function(){orient.check();}, 2000);
    //occasionally check our values for updates and if theres changes run functions(just incase!!)
    orient.adjustIrritatingCSS(orient.width); 
    //sets value on first run
};

J'espère que cela aidera tous ceux qui ne peuvent pas faire fonctionner la taille de la boîte! Post-scriptum J'ai rencontré des problèmes avec iOS en utilisant cette ...

0
bhiqa

Je voulais ajouter l’alternative no-calc, no-border-box (CSS2).

Les éléments de bloc à flux normal ont initialement width: auto, qui correspond à la largeur du bloc conteneur moins les largeurs de la marge, de la bordure et du remplissage.

Le exemple ci-dessus peut être fait, sans border-box, simplement comme

.content {
    padding-left: 300px;
}

De même, avec

.content {
  margin-left: 1px;
  border-left: 1em solid;
  padding-left: 1rem;
}

la largeur effective est 100% - 1px - 1em - 1rem.

Pour les éléments en position absolue, height: auto a des propriétés similaires:

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-bottom: 1px;
  border-bottom: 1em solid;
  padding-bottom: 1rem;
}

Ici, la hauteur effective est 100% - 1px - 1em - 1rem.

0
sam

Changez la largeur de #menuLog avec% ou px et vous verrez la magie. Fonctionne avec tous les appareils, même <2,3

*{
        -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#menuLog{
  width:30%;
  /*width:300px;*/
        height: 60px;
        padding: 5px;
        background-color: #ddd;
}
#menuLog > div[inline-log="1"]{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        height: 100%;
        margin-right: -60px;
}
#menuLog > div[inline-log="1"] > div[inline-log="1.1"]{
        margin-right: 60px;
        height: 100%;
        background-color: red;
}
#menuLog > div[inline-log="2"]{
        display: inline-block;
        vertical-align: top;
        width: 60px;
        height: 100%;
}
#menuLog > div[inline-log="2"] > div[inline-log="2.1"]{
        display: inline-block;
        vertical-align: top;
        width: 55px;
        height: 100%;
        background-color: yellow;
        margin-left:5px;
}
<div id="menuLog">
  <div inline-log="1">
    <div inline-log="1.1">
      One
    </div>
  </div><div inline-log="2">
     <div inline-log="2.1">
      Two
     </div>
  </div>
</div>
0
Mareks Dunkurs