Ho il seguente codice che funziona perfettamente con la centratura dei contenuti finché lo vh è inferiore a 650px. Mi chiedevo se ci fosse un modo per rendere questo valore non andare mai al di sotto di 0 usando solo i CSS calc.C'è un modo per rendere CSS calc() mai un valore negativo?
.my-margin-top {
margin-top: calc(50vh - 325px);
}
Premettendo che non c'è modo di vincolati i valori calcolati calc() si potrebbe usare un mediaquery quando max-height è al massimo 650px
.my-margin-top {
margin-top: calc(50vh - 325px);
}
@media all and (max-height: 650px) {
.my-margin-top {
margin-top: 0;
}
}
o si potrebbe anche ripristinare la logica avvolgendo la regola esistente in un mediaquery min-height
@media all and (min-height: 650px) {
.my-margin-top {
margin-top: calc(50vh - 325px);
}
}
di rispondere alla domanda generale:
C'è un modo per rendere CSS calc() mai un valore negativo?
La risposta è no, perché il CSS non fornisce un modo per vincolare manualmente (o clampare) una quantità ad un valore minimo o massimo.
Se un numero o una lunghezza può essere nativo limitato a un determinato intervallo dipende dalla proprietà con questo valore calc(). Da spec:
Il valore risultante da un'espressione deve essere bloccato sull'intervallo consentito nel contesto di destinazione.
Questi due sono equivalenti a "larghezza: 0px" poiché le larghezze inferiori a 0 px non sono consentite.
width: calc(5px - 10px); width: 0px;
Ad esempio, mentre i valori negativi per margin e z-index sono validi, valori negativi per border-width, padding, height, width e così via non sono. Le specifiche di questi sono quasi sempre definite nelle specifiche per la rispettiva proprietà.
Poiché nel tuo esempio si utilizzano unità viewport, è possibile utilizzare le query multimediali insieme a esse come demonstrated by fcalderan.
ottima risposta stavo facendo un commento per cambiarlo in 'max-height', cosa che hai fatto prima di averlo estratto. Non posso credere che non stavo pensando a una richiesta di media. – cmorrissey
@cmorrissey: Per essere onesti, il tuo caso d'uso si limita a * succede * a disporre di unità viewport che si prestano alle query multimediali. In generale, non è possibile bloccare il risultato di un'espressione calc() su un certo intervallo di valori: il CSS dovrebbe fornire una qualche forma di min() e max() per quello. – BoltClock
@BoltClock si verificherà un'eccezione quando calc() sta calcolando un'altezza/larghezza in modo da limitare con altezza/larghezza minima/larghezza (anche senza mediaqueries), vedere http://stackoverflow.com/a/35505372/1098851 – fcalderan