Ich habe ein auf sauberem CSS basierdendes Seitendesign, das ungefähr so aussieht.
+---------------+
| Überschrift |
+--------+------+
| Inhalt | Menu |
| Inhalt | Menu |
| Inhalt +------+
| Inhalt |
+--------+
Ich will aber, dass das Menü genauso hoch wie der Inhaltsteil wird (die leere Ecke unten rechts soll die selbe Hintergrundfarbe wie das Menü bekommen). Mit dem alten tabellenbasierten Design war das kein Problem. Aber wie mache ich das mit CSS? (Ja, height:100% habe ich schon versucht.)
Ich habe folgende "dirty" Lösung gefunden. Ich glaube aber nicht, dass das optimal ist. Vor allem wenn man das Browserfenster ganz klein macht, fällt der Trick mit border-right optisch auseinander. Gibt es eine bessere Lösung?
<h1 style="background-color:blue; margin:0;">Überschrift</h1>
<ul style="background-color:green; float:right; margin:0; width:140px;">
<li>Menü</li>
<li>Menü</li>
</ul>
<div style="border-right:140px solid red;">
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
<p>Inhalt</p>
</div>