100% Höhe des Viewports + Padding davon abziehen?

[Ralf]

Hallo liebe Forenuser,

wir arbeiten zur Zeit an einem Webapplication-Tool um Bilder zu zerschneiden.
Das Layout soll so aufgebaut werden, dass das div#container die Arbeitsfläche oder auch den Schreibtisch darstellt (ähnlich wie der graue Hintergrund aus Photoshop z.B.). Der Body selbst, also der Viewport in diesem Sinne, soll keine Scrollbars erhalten.

Ein weiteres Div (#imagesrc) beinhaltet das zu bearbeitende Bild, welches Scrollbalken erhält, damit man ein evtl. zu großes Bild scrollen kann. Die Arbeitsfläche hat eine Höhe von 100%. Der Bild-Container ebenfalls. Jedoch soll die Arbeitsfläche ringsum ein 20px-Padding erhalten, sodass das ganze einem hellgrauen Bilderrahmen ähnelt (in diesem Rahmen sollen später Werkzeuge erscheinen). Im Endeffekt wirkt das ganze dann wie eine Art Maske, die auf dem großen Bild liegt.

Meinen bisherigen Stand findet ihr hier: Testcase

Nun zu meinem Problem (ich gehe jetzt bewusst nur auf den Fx-Browser ein):
Da sich das Padding zur Höhe dazuaddiert wird der Bild-container unten aus dem Viewport gedrückt. Sprich: im Viewport habe ich nun ringsum keinen konstanten 20px Rahmen mehr.

Gibt es eine Möglichkeit die Paddings und Borders von den 100% abzuziehen, damit das Container-Div sich immer genau in den Viewport einpasst?

Für einen Denkanstoß wäre ich sehr dankbar.

Grüße,
Ralf