Altezza Div con proprietà CSS height • min-height • max-height • auto

Altezza div con proprietà height

Il Div ha un'altezza di 250 px

.div1{
height:250px;
}

Altezza div con proprietà min-height

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.div2{
min-height:300px;
}

Altezza div con proprietà max-height

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.




.div3{
max-height:300px;
}

Altezza div con proprietà height:auto

Questo box ha un'altezza impostata su auto. La sua dimensione verticale è determinata dal suo contenuto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

.div4{
height:auto;
}

Altezza Div senza alcuna altezza impostata

Questo DIV non ha un'altezza impostata con height.
La sua dimensione verticale è determinata dal testo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Altezza div con proprietà height in percentuale

Questo box ha un'altezza pari al 50% del contenitore. Si trova in un box con altezza di 400px. Sarà alto 200px

.div6{
height:400px;
}

.div7{
height:50%;
}
Torna all'articolo