Matthias Scharwies: Inhalt geht über css box hinaus

Beitrag lesen

problematische Seite

Servus!

Hallo Experten,

ich bin Lehrer und das erste mal mit einer profanen Frage hier. Möchte mit Schülern eine Box machen, die ca 90% des screens füllt aber mit dem Inhalt wächst. Habe im Beispiel eine Tabelle (ich weiß es ist verpönt, ging aber schneller) verwendet. Wenn ich die kommentierten Reihen aktiviere, schaut die Tabelle über die Box hinaus, was gräßlich aussieht.

Deine Box hat eine feste Höhe von 90%. Warum?

Wenn Du ihr eine min-height gibst, nimmt sie den gewünschten Raum ein, wächst, wenn nötig, aber mit.

#info {  
  min-height:90%;
  margin: 2em;
  padding: 1em;
  background-color: #666666;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  box-shadow: 2px 3px 5px rgba(255, 0, 0, .6),  
              0 2px 9px rgba(255, 255, 255, 0.2) inset, 
              0 -2px 9px rgba(0, 0, 0, 0.3) inset;
  color: #FFFFFF;
}

PS: Die Box ist unnötig, mach das gleich im body. Die feste Höhe von 100% ist auch nicht optimal, wenn du auf dem Handy nicht nach unten scrollen kannst, besser min-height: 100%?

Hab schon vieles probiert aber noch keine Lösung gefunden. Hat da wer einen Rat?

Hast Du schon einmal überlegt mit Grid Layout zu arbeiten?

Herzlichen Dank aus Salzburg.

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste