CSS CALC alternative
Próbuję dynamicznie zmienić szerokość div przy użyciu CSS i bez jquery. poniższy kod będzie działał w następujących przeglądarkach: 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);
Chcę również wspierać IE 5.5 i wyższe , znalazłem następujące: wyrażenie. Czy jest to poprawne użycie:
/* IE-OLD */
width: expression(100% - 500px);
Czy Mogę również obsługiwać operę i przeglądarkę Android?
6 answers
Prawie zawsze {[5] } może zastąpić regułę calc, np. calc(100% - 500px)
używaną w układzie.
Na przykład:
Jeśli mam następujące znaczniki:
<div class="sideBar">sideBar</div>
<div class="content">content</div>
Zamiast tego: (zakładając, że pasek boczny ma szerokość 300px)
.content {
width: calc(100% - 300px);
}
Zrób to:
.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: Nie będę działał w IE 5.5 (hahahaha) , ale będzie działał w IE8+ , wszystkich mobilnych i wszystkich nowoczesnych przeglądarkach (caniuse)
Właśnie znalazłem ten post z bloga Paula Irish ' a, w którym również pokazuje, że rozmiar pudełka jest możliwą alternatywą dla prostych wyrażeń calc (): (pogrubienie jest moje)
Jednym z moich ulubionych przypadków użycia, które border-box dobrze rozwiązuje, są kolumny. I może chcesz podzielić moją siatkę z 50% lub 20% kolumn, ale chcesz dodaj padding przez px lub em. BEZ nadchodzącego CALC () CSS jest to niemożliwe ... chyba że ty użyj border-box .
NB: powyższa technika rzeczywiście wygląda tak samo, jak odpowiadająca jej Instrukcja calc (). Jest jednak różnica. Podczas używania reguły calc() wartość szerokości div zawartości będzie w rzeczywistości równa 100% - width of fixed div
, jednak w powyższej technice, rzeczywista szerokość div zawartości jest pełną 100% szerokością, jednak ma ona wygląd 'wypełniania' pozostałej szerokości. (co jest prawdopodobnie wystarczająco dobre, aby większość ludzi potrzebowała tutaj)
To powiedziawszy, jeśli jest ważne że szerokość content div jest rzeczywiście 100% - fixed div width
, to można użyć innej techniki - która wykorzystuje konteksty formatowania bloków - (zobacz tutaj i tutaj dla krwawych szczegółów):
1) float stałej szerokości div
2) Ustaw overflow:hidden
lub overflow:auto
na treści div
Demo
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:14
Po prostu miej rezerwę, zanim calc wykona sztuczkę.
width: 98%; /* fallback for browsers without support for calc() */
width: calc(100% - 1em);
Zobacz więcej tutaj https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-24 11:16:12
Użyj tego
.content
{
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-right: 500px;
margin-right: -500px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-12 06:49:01
Spędziłem najlepszą część 3 godzin próbując obejść to dla konkretnego przypadku na urządzeniach andriod, nie mogłem uzyskać rozmiaru pudełka, więc połączyłem go z moim JS jako brudne obejście... nie jQuery wymagane jednak! :)
Podjęte na kod roboczy na 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 ze słuchaczami zdarzeń
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
};
Mam nadzieję, że pomoże to każdemu, kto nie może uruchomić rozmiaru pudełka! PS doświadczyłem problemów z używaniem tego systemu ios...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-10 08:18:19
Zmień szerokość # menuLog z % lub px i zobaczysz magię. Działa z każdym urządzeniem nawet
*{
-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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-23 22:37:11
Chciałem dodać alternatywę no-calc, no-border-box (tj. CSS2).
Elementy blokowe o normalnym przepływie mają początkowo width: auto
, co w rzeczywistości jest szerokością bloku zawierającego minus szerokości marginesu, obramowania i wypełnienia.
Powyższy przykład może być wykonany bez ramki, po prostu jako
.content {
padding-left: 300px;
}
Podobnie, z
.content {
margin-left: 1px;
border-left: 1em solid;
padding-left: 1rem;
}
Efektywna szerokość to 100% - 1px - 1em - 1rem
.
Dla absolutnie pozycjonowanych elementów height: auto
ma podobne właściwości:
.content {
position: absolute;
top: 0;
bottom: 0;
margin-bottom: 1px;
border-bottom: 1em solid;
padding-bottom: 1rem;
}
Tutaj efektywna wysokość wynosi 100% - 1px - 1em - 1rem
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-11 03:04:49