УСБ калькулятор альтернативные

просто есть запасной вариант, прежде чем calc сделает трюк.

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

Смотрите больше здесь https://developer.mozilla.org/en-US/docs/Web/CSS/calc

использовать

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

просто потратил большую часть 3 часов, пытаясь обойти это для конкретного случая на устройствах andriod, не мог заставить размер коробки работать, поэтому я связал его с моим JS как грязный обходной путь... нет jQuery не требуется, хотя! :)

принято на рабочий код на 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 с прослушивателями событий

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

надеюсь, что это поможет всем, кто не может получить коробку калибровки работает! PS у меня возникли проблемы с ios, используя это...

измените ширину # menuLog с % или px, и вы увидите магию. Работает с каждым устройством даже

*{
	-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>

Я хотел добавить альтернативу no-calc, no-border-box (т. е. CSS2).

элементы блока нормального потока изначально имеют width: auto, что фактически является шириной содержащего блока минус ширина поля, границы и заполнения.

The пример выше можно сделать, без рамки-коробки, просто как

.content {
    padding-left: 300px;
}

аналогично и с

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

эффективная ширина составляет 100% - 1px - 1em - 1rem.

абсолютно позиционированных элементы, height: auto имеет аналогичные свойства:

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

здесь эффективная высота 100% - 1px - 1em - 1rem.