Hallo Shenga,
schöne Lösung, weil nicht am HTML-code rumpfuscht, so ähnlich habe ich das Problem auch gelöst.
Mich interessiert trotzdem, warum das erste Code nicht wie erwartet dargestellt wird. Gibt es in der Spezifikation eine Erklärung, die ich nicht kenne, oder ist das ein Bug?
Ich denke mal das kann man sich so erklären, dass Opera und Mozilla/Firefox ein Padding-Bottom schon nicht mehr als eigentlichen Content ansehen und somit bei einem die Höhenangabe eines Elements sprengenden Inhalt auf dessen Darstellung bei overflow:auto
oder overflow:scroll
verzichten. Ich finde aber keine diesbezügliche Spezifikation, was jetzt die "richtige" Darstellung ist.
Mit der Pseudoklasse :after wird aber explizit Inhalt angegeben, auch wenn es sich dabei nur um ein Leerzeichen handelt. Heikel ist die Lösung nur in sofern, als dass ja nicht auszuschließen ist, dass der IE dies nicht doch in einer späteren Version mal interpretiert und dann das doppelte "Padding-Bottom" darstellt.
Gruß Gernot