como - Alternativa de CSS Calc
margin calc css (6)
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?
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.
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
<div class="sessionDiv" style="width:auto;">
<img> <!-- image to resize -->
</div>
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;
}
<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>
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:
<div class="sideBar">sideBar</div>
<div class="content">content</div>
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;
}
<div class="sideBar">sideBar</div>
<div class="content">content</div>
PD: No funcionaré en IE 5.5 (jajajaja), pero funcionará en IE8 +, todos los dispositivos móviles y todos los navegadores modernos ( caniuse )
Acabo de encontrar esta publicación del blog de Paul Irish, donde también muestra el tamaño de caja como una posible alternativa para las expresiones simples de calc (): (el negrita es mío)
Uno de mis casos de uso preferidos que border-box resuelve bien es columnas. Es posible que desee dividir mi cuadrícula con 50% o 20% de columnas, pero quiero agregar relleno a través de px o em. Sin el próximo calc de CSS () esto es imposible ... a menos que use border-box .
NB: La técnica anterior de hecho se ve igual a la correspondiente declaración de calc (). Hay una diferencia sin embargo. Cuando se usa una regla calc (), el valor del ancho del div de contenido será en realidad 100% - width of fixed div , sin embargo, con la técnica anterior, el ancho real del div de contenido es el ancho completo del 100%, pero tiene la apariencia de ''llenar'' el ancho restante. (que probablemente sea lo suficientemente bueno como para que la gente lo necesite)
Dicho esto, si es importante que el ancho del div de contenido sea en realidad 100% - fixed div width entonces se puede usar una técnica diferente - que utiliza contextos de formato de bloque - (ver here y here los detalles sangrientos):
1) flotar el div ancho fijo
2) establecer overflow:hidden o overflow:auto en el contenido div
Demo
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 .
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;
}