• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

scroll-Problem

Paric

Neues Mitglied
Hallo,

ich habe folgendes Problem:
Ich möchte auf einer Seite einen Rahmen mit einem abstand von 9px vom Rand haben. Allerdsins soll die Seite mind. 100% Höhe haben, ggf. auch mehr, je nach Inhalt. Der Rahmen ist 2farbig. Ich komme einfach nicht weiter, habe schon verschiedene Sachen hin und her probiert. Hier mal ein kurzes Test-script um mein Problem mal zu verdeutlichen:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
*, html, body {
    margin: 0;
    padding: 0;
}
body {
  position: relative;
  margin: 9px;
  border: 1px solid #CECECE;
  background-color: #FFFFFF;
  color: #7D7C62;
  font: normal 14px "Arial", Times, serif;
}
#container {
  height: 100%;
  border: 1px solid #55A528;
}
html, body {
    height: 100%;
}
</style>
</head>
<body>
<div id="container">
Test
</div>
</body>
</html>

Ich vermute mal ich sehe den Wald vor lauter Bäumen nicht...

[edit]
Hier die Datei mal auf meinem Testserver:
http://test.paric.de/TEMP/test.html
[/edit]
 
Zuletzt bearbeitet:
Das mit dem 9px-Abstand sollte funktionieren, es sollte bei deinem Code auch kein Scrollbalken zustande kommen. Wo haperts also genau?
 
ich habe mir mal erlaubt das kurze scrpit auf nen Server zu schmeissen:

test

Da solltest Du das Problem erkennen können.
 
Du gibst eine height von 100% für den body an - Du darfst aber nicht vergessen, dass da noch der margin-Abstand hinzukommt. Der verursacht auch den Scrollbalken. Dein Body ist also 100% hoch + 18px (durch's margin).
 
Eigentlich sind es sogar 100% + 9px oben + 9px unten + 1px Rahmen oben + 1px Rahmen unten. Lösbar ist der Wunsch imho nur durch zusätzliche Hilfselemente und die Arbeit mit Innenabständen.
 
so... dann kann ich auch mal...

um GANZ genau zu sein....

100% + 9px oben + 9ps unten +1px oben (von body-rahmen) + 1px unten (von body-rahmen) + 1px oben (von div-rahmen) + 1px unten (von div-rahmen) ;)

aber wie sieht das dann aus? hab schon mehrere Anlaufversuche unternommen, aber noch kein zufriedenstellendes Ergebnis erziehlt....
 
so... dann kann ich auch mal...

100% + 9px oben + 9ps unten +1px oben (von body-rahmen) + 1px unten (von body-rahmen) + 1px oben (von div-rahmen) + 1px unten (von div-rahmen) ;)

aber wie sieht das dann aus? hab schon mehrere Anlaufversuche unternommen, aber noch kein zufriedenstellendes Ergebnis erziehlt....

Das ist ein exemplarisches Beispiel dafür, warum man sich mit der Verwendung relativer Größen zurückhalten sollte. Prozentwerte anstatt von Pixeln machen nur unter ganz bestimmten Umständen Sinn. Beispielsweise dann, wenn ein Bild an die Größe des Viewports angepasst werden soll, oder man bei Seiten mit sehr vielen Inhalten den Besitzern großer Monitore übermäßiges scrollen ersparen will. Dafür gibt man im Gegenzug aber die Kontrolle über das Layout auf.


Tipp: Anstatt das selber auszurechnen kannst du dir die berechneten Werte auch im Firebug anzeigen lasse.
 
Das Problem ist, es handelt sich um einen Kundenwunsch. Der Kunde hat ein Tabellendesign, welches ich natürlich umwuchten möchte, ohne das es optisch anders aussieht. Und genau daran scheitert es gerade bei mir.
 
Danke für die Antwort, so ähnlich habe ich es auch gelöst:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
*, html, body {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
#outer {
  position: absolute;
  color: #7D7C62;
  font: normal 14px "Arial", Times, serif;
  height: auto !important;
  min-height: 100%;
  width: 100%;
}
#inner {
  position: absolute;
  border: 1px solid #CECECE;
  left: 9px; right: 9px; top: 9px; bottom: 9px;
}
#container {
  position: absolute;
  height: 100%;
  border: 1px solid #55A528;
  overflow: auto;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="container">
test
</div>
</div>
</div>
</body>
</html>
 
Zurück
Oben