CSS Calc альтернатива

Я пытаюсь динамически изменить ширину div, используя CSS и без jquery. Следующий код будет работать в следующих браузерах: 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);

Я хочу также поддерживать IE 5.5 и выше , я нашел следующее: выражение. Это правильное использование:

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

Могу ли я также поддерживать Opera и браузер Android?

66 голосов | спросил jipje44 16 PMpTue, 16 Apr 2013 14:15:26 +040015Tuesday 2013, 14:15:26

6 ответов


0

Почти всегда box-sizing: border-box может заменить правило калькуляции, например calc(100% - 500px) используется для макета.

Например:

Если у меня есть следующая разметка:

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

Вместо этого: (при условии, что боковая панель имеет ширину 300 пикселей)

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

Сделайте это:

.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: я не буду работать в IE 5.5 (хахахаха), но он будет работать в IE8 +, на всех мобильных и во всех современных браузерах ( caniuse )

Демонстрация ширины

Демонстрация высоты

Я только что нашел этот пост из блога Пола Айриша где он также показывает размер блока в качестве возможной альтернативы для простых выражений calc (): (жирный шрифт - мой)

  

Один из моих любимых сценариев использования, которые хорошо решает рамка - это столбцы. я   Возможно, вы захотите разделить мою сетку на 50% или 20% столбцов, но хотите   добавить отступ через px или em. Без предстоящей калькуляции CSS () это   невозможно ... если вы не используете рамку .

Примечание: вышеприведенный метод действительно выглядит так же, как и соответствующий оператор calc (). Хотя есть разница. При использовании правила calc () значение ширины div содержимого на самом деле будет 100% - width of fixed div, однако при использовании описанной выше техники фактическая Ширина содержимого div - это полная ширина 100%, но он имеет внешний вид для «заполнения» оставшейся ширины. (что, вероятно, достаточно хорошо для нужд большинства людей здесь)

Тем не менее, если важно , что ширина содержимого div на самом деле равна 100% - fixed div width, то это другой метод - который использует контексты форматирования блоков - может быть использован (см. здесь и здесь для подробностей):

1) плавать с фиксированной шириной div

2) установить overflow:hidden или overflow:auto на содержание div

Демонстрация

ответил Danield 2 ndEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 02 Sep 2013 14:03:38 +0400 2013, 14:03:38
0

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

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

Подробнее здесь https://developer.mozilla.org/en-US/docs/. Web /CSS /известково

ответил Tommy Sørensen 2 ndEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 02 Sep 2013 13:54:26 +0400 2013, 13:54:26
0

используйте это

    .content
{
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right: 500px;
    margin-right: -500px;
}
ответил Mohamed Malik 12 22013vEurope/Moscow11bEurope/MoscowTue, 12 Nov 2013 10:49:01 +0400 2013, 10:49:01
0

Я потратил большую часть 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, используя это ...

ответил bhiqa 10 PMpThu, 10 Apr 2014 12:18:19 +040018Thursday 2014, 12:18:19
0

Измените ширину #menuLog с помощью% или px, и вы увидите магию. Работает с каждым устройством, даже <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>
ответил Mareks Dunkurs 24 MaramFri, 24 Mar 2017 01:37:11 +03002017-03-24T01:37:11+03:0001 2017, 01:37:11
0

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

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

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

.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.

ответил sam 11 AM00000060000004931 2017, 06:04:49

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132