HTML-Box mit min-height und max-height versehen

[nina20]

Guten Morgen,

ich hoffe ihr könnt mir helfen.

Ich möchte ein Responsive Design erstellen und möchte, dass die HTML-Box die mindest Breite 480px und die maximale Breite 960px hat. Gleichzeitig soll es auch die mindest Höhe von 80px und maximale Höhe 200px haben.
Heißt, wenn ich das Fenster verkleinere, so soll sich die Box mit verkleinen.
Bisher habe ich es nur geschafft, dass die Breite mit geht. Aber nicht die Höhe!

.box1 {
max-height:200px;min-height:80px;max-width:960px;min-width:480px;background:#ffffff;color:#000;

}

Kann mir da jemand helfen?

Liebsten Gruß und Danke!

 

[scbawik]

Ein "height: 100%" hilft vielleicht ;)

 

[nina20]

Wow. Super, ja es funktioniert. Danke! :) Aber warum gibt man bei height 100% an und nicht auch noch bei width?

 

[scbawik]

Wieso und weshalb kann ich dir leider nicht sagen, da ich mich diesbezüglich nie schlau gemacht habe.

Aber wenn es dich interessiert, such einfach mal nach "Block-Elementen", irgendwo findet sich sicher eine Erklärung.

Ich denke es liegt daran dann dass Block-Elemente uA dazu gedacht sind, untereinander platziert zu werden, was bei 100% Höhe eher schwer ist.