2012-06-26 13 views
9

Se possibile, come è possibile sovrascrivere una proprietà min-height di una classe per un particolare div?Ignora proprietà min-height

Esempio:

.someclass { 
 
    min-height: 200px; 
 
}
<div class="someclass"> 
 
    -- content -- 
 
</div>

Ho provato con qualcosa di simile style="min-height:100px!important;" sul div, ma che non sembra funzionare.

risposta

14

è una pessima abitudine usare le dichiarazioni !important nei fogli di stile standard. Evitatelo a tutti i costi, perché spezza la natura a cascata dei fogli di stile.

Utilizzare uno more specific selector per sovrascrivere gli stili precedenti.

Per ripristinare gli stili predefiniti, utilizzare auto|inherit|0 in base all'attributo. Per min-height è 0. CSS3 introduce il valore speciale inital che dovrebbe essere usato preferibilmente - ma sfortunatamente ha limitato IE support.

Nel tuo caso min-height:100px; in un selettore con specificità più elevata (ID o stile in linea - preferibilmente non quest'ultimo) dovrebbe fare il trucco.

let div = document.querySelector("#morespecific"); 
 

 
div.innerHTML = "This div has its min-height set to: "+window.getComputedStyle(div).minHeight;
.someclass{ 
 
    min-height:200px; 
 
    border:1px solid red; 
 
} 
 
#morespecific{ 
 
    min-height:100px; 
 
    border-color:blue; 
 
}
<div id="morespecific" class="someclass"> 
 
-- content -- 
 
</div>

+0

necessario sostituire l'altezza minima: 200 px. min-height: auto non funziona anche – nik

+0

grazie per la tua soluzione, omettevo px dopo 100px. ciò accade quando la figura arriva dinamicamente – nik

+0

prego;) – Christoph

1

Un !important bandiera ha la necessità di andare all'interno del punto e virgola, in questo modo:

.someclass {min-height: 200px !important;} 

Inoltre, non si dovrebbe davvero utilizzare !important bandiere se si può farne a meno. Una regola imperativa deve essere più specifica della regola originale.

Penso che devi leggere su specificity and inheritance.

+0

utilizzato importante per scartare questa soluzione e ho bisogno di sovrascrivere la proprietà di altezza minima: 200 px. Sta già usando 200px, quindi non sarà d'aiuto – nik

+0

... Quindi cambia da 200 a 100? –

+0

.someclass con altre proprietà non è impostato per questo solo div. Ecco perché è necessario sostituirlo :) – nik

0

stili in linea sostituiscono stili CSS, in modo

<div class="someclass" style="height: 50px;">...</div> 

ignora la regola nel foglio di stile. Tuttavia, in genere non è una buona soluzione per risolvere questo problema. La soluzione preferita sarebbe quella di utilizzare un selettore con una specificità più elevata nel tuo css esterno.

+0

Provato questo, ma non ha funzionato anche – nik

+0

stesso, ometto omettere px dalla proprietà quindi la soluzione corretta sarebbe

-- content --
. Grazie per aver risposto. – nik

3

non ho trovato alcuna risposta di meglio che basta usare 0 per ignorare roba min, e usare qualcosa come 1000% per ignorare roba max.

+0

Sì! questo è il modo standard per ripristinare le proprietà CSS "min- *". –

+0

Questa è la risposta logica. Grazie. –

Problemi correlati