Altezza Div con proprietà height | min-height | max-height | auto

Altezza Div senza proprietà height

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.
.div1 {
width: 300px;
padding: 10px;
background: #d7d7d7;
margin: 0 auto 30px;
}

Altezza div con proprietà height

Il Div ha un'altezza di 250 px
.div2 {
width: 300px;
padding: 10px;
background: #d7d7d7;
height:250px;
}

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
.div3 {
width: 300px;
height: 400px;
padding: 10px;
background: #d7d7d7;
}

.div4 {
width: 300px;
height: 50%;
padding: 10px;
background: #f60;
}

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.

.div5 {
width: 300px;
height: auto;
padding: 10px;
background: #d7d7d7;
}