Alternativa de CSS Calc

Estoy intentando cambiar dinámicamente el ancho de un div usando CSS y sin jquery. El siguiente código funcionará en los siguientes navegadores: 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); 

También quiero soportar IE 5.5 y superior , encontré lo siguiente: expresión. ¿Es este el uso correcto?

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

¿Puedo también soportar Opera y el navegador Android?

Casi siempre box-sizing: border-box puede reemplazar una regla de calc(100% - 500px) como calc(100% - 500px) utilizada para el diseño.

Por ejemplo:

Si tengo el siguiente marcado:

  
content

En lugar de hacer esto: (suponiendo que la barra lateral tenga 300 px de ancho)

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

Hacer esto:

 .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; } 
  
content

Solo tiene una alternativa antes de que el calc haga el truco.

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

Ver más aquí https://developer.mozilla.org/en-US/docs/Web/CSS/calc

utilizar esta

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

Acabo de pasar la mejor parte de 3 horas tratando de resolver esto para un caso específico en dispositivos andriod, no pude conseguir el tamaño de la caja para que funcione, así que lo he vinculado a mi JS como una solución sucia … ¡sin embargo, no se requiere jQuery! 🙂

Tomado de código de trabajo en andriod 2.3.

 

JS con oyentes de eventos

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

Espero que esto ayude a cualquiera que no pueda trabajar en el tamaño de la caja. PD. He tenido problemas con iOS al usar esto …

Cambie #menuLog width con% o px y verá magia. Funciona con todos los dispositivos, incluso <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; } 
  

Quería agregar la alternativa no-calc, no-border-box (es decir, CSS2).

Los elementos de bloque de flujo normal inicialmente tienen width: auto , que es efectivamente el ancho del bloque contenedor menos el margen, el borde y el ancho del relleno.

El ejemplo anterior se puede hacer sin border-box, simplemente como

 .content { padding-left: 300px; } 

Del mismo modo, con

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

el ancho efectivo es 100% - 1px - 1em - 1rem .

Para elementos absolutamente posicionados, height: auto tiene propiedades similares:

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

Aquí la altura efectiva es 100% - 1px - 1em - 1rem .