HTML - Back to the Basics: Layout

Kóyaánasqatsi

Hallo,
erstmal was möchte ich: Ich möchte ein div, dass sich dynamisch der Seite anpasst (klappt). Dieses div soll einen Rahmen mit abgerundeten Ecken haben, bestehend aus insgesamt 8 Texturen (oben-link, oben-mitte, oben-rechts, rechts, unten-rechts usw.).

Skizzierung:
 -----------------------------------  <- Rahmen
| |a|                              |
| |x|                              |
| |x|                              |
| |x|                              |
| |x|                              |
| |x|                              |
| |b|                              |
 -----------------------------------

Rahmen <- div ansich (position: relative)
|a| <- Abgerundete Ecke (oben links)(div-position: absolute)
|x| <- Border (links)(div-position: absolute)
|b| <- Abgerundete Ecke (unten links)(div-position: absolute)

Das Problem:
Da Rahmen ja eine dynamische Größe hat/haben soll, muss |x| sich ebenfalls dynamisch in der Höhe anpassen. Dabei verstehe ich nicht, wie ich das realisieren soll. Gebe ich dem |x| height: 100%, so überdeckt es einfach |b|.

Frage:
Gibt es also eine Möglichkeit, um ein div zwischen 2 anderen div's zu 100% in der Höhe zu strecken?
Natürlich habe ich schon versucht mit 97% zu arbeiten, allerdings funktioniert das nur bis zu einem bestimmten Bereich, in der man das Rahmen-div vergrößert. Es muss für das Problem doch eine schönere Lösung geben oder?

Vielen Dank im Voraus!

Rhombicosidodecahedron

schlechteste Lösung Tabelle,
sonst wird css ein bis zwei Wege haben werden (grid und border-image).

Vereinfacht hätte ich folgendes gemacht:

<div style="margin-bottom: $höhe_von_b"> <!-- durchgehend Hintergrund "x" --> 
      <div> <!-- Mit Hintergrund a --> 
      a
      </div>
    x
    x
    ...

  </div>
  <div style="margin-top: -$höhe_von_b"> <!-- Mit Hintergrund b !!! Beachte das - --> 
      b
  </div>

(ungetestet)

Vielliceht gibt es einen besseren Weg.

Kóyaánasqatsi

Hallo,

Danke schonmal für die Antwort. Dein Code würde schon nicht mehr funktionieren, sobald das Eltern-div(Rahmen) dynamisch erzeugt werden würde. So wäre dein Code äquivalent zu der Methode, den Border zu 100% in der Seite auszufüllen und die Ecken bloß mit den Grafiken zu füllen.

Ich würde gerne eine saubere Methode haben. Irgendwas, um die Größe dynamisch anpassen zu lassen. Eine Art

height: auto

bräuchte ich...

zwutz

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Kóyaánasqatsi

zwutz schrieb:

http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Danke für den Link, allerdings reicht mir da die Crossbrowserunterstützung von IE9+-aufwärts nicht ganz. Es gibt einfach noch zu viele Leute, die ältere Browser benutzen.

Habe das Problem im Übrigen gelöst: Für alle, die so endlos lange gegooglet haben wie ich:
-Rahmen: relative
-|a|: absolute (selbiges gilt für weitere Borderelemente)

Nun mit top-bottom-right-left arbeiten und die Ecken über die Borderlinien zeichnen. Hat bei mir super und ohne Probleme geklappt. Dabei gilt nur zu beachten, dass die Ecken eine Hintergrundfarbe haben, die die restlichen Borderlinien überdecken.

Danke trotzdem!