"Scrollbox" DIV ignoriert padding-right und -bottom wert

KICK

Mitglied
Hallo!

Wenn der Inhalt (#inner) meiner Scrollbox (#scrollbox) größer ist als die Scrollbox selbst werden padding-right und padding-bottom von allen aktuellen Browsern ignoriert.

Beispielcode:
HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
		<title>XXXX</title>
	</head>
	<body>
	
		<!-- CSS -->
		<style>
		*{
			margin:0px;
			padding:0px;
		}
		body{
			background:#5286C1;
		}
		#scrollbox{
			border:1px solid #000;
			width:300px;
			height:300px;
			overflow:auto;
			padding:40px;
			margin:10px;
		}
		#inner{
			height:1495px;
			width:1495px;
			border:5px solid #FFF000;
		}
		</style>
		<!-- /CSS -->
		
		<!-- HTML -->
		<div id="scrollbox">
			<div id="inner">im really oversized...!</div>
		</div>
		<!-- /HTML -->

	</body>
</html>

Kann mir jemand sagen warum das so ist? Bzw. eine Lösung des Problems anbieten?

Danke und Grüße!
 
... Kann mir jemand sagen warum das so ist?
Hallo,

in der CSS-Spezifikation wird zwischen dem Inhaltsbereich und dem Hintergrundbereich unterschieden. Der Inhaltsbereich einer Box hat die Größe, die ihr mit der width- und height-Eigenschaft zugewiesen wird. Der Hintergrundbereich umfasst den Inhaltsbereich plus padding-Bereich und Rahmen (border) - in diesem Bereich ist also der Boxhintergrund zu sehen.

Wenn wie in deinem Beispiel ein Blockelement von einem kleineren Block umschlossen wird, dann muss der Browser den horizontalen und vertikalen Scrollbereich berechnen. Offensichtlich wird das so berechnet, dass die Größe des eingeschlossenen Hintergrundbereiches plus der Position im umschließenden Element zugrunde gelegt wird. Wenn nun die Position lediglich mit den Werten padding-top bzw. padding-left des umschließenden Blockes und margin-top bzw. margin-left des eingeschlossenen Blockes berechnet wird, dann ist im Scrollbereich nur der Hintergrundbereich des eingeschlossenen Blockes zu sehen und das ist jetzt offensichtlich das Standardverhalten der Browser.

... Bzw. eine Lösung des Problems anbieten?

Ich würde mit der "Box-in-a-box"-Methode noch eine Wrapper-Box um deinen Inhaltscontainer legen. Die Wrapper-Box erhält dann die sichtbaren width- und height-Werte sowie eine padding-Eigenschaft für den sichtbaren Rand. Die Größe des Inhaltscontainer (#inner) muss dann um seine padding- und border-Größe verkleinert werden.

Ich habe dein Beispiel etwas abgeändert, vielleicht wird dann die Handhabung deutlicher:
HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>XXXX</title>
    <style>
    *{ margin: 0; padding: 0; }
    body{ background:#58C; }

    #scrollbox{
      width: 300px;
      height: 300px;
      overflow: auto;
      border: 1px solid #000;
    }
    #iWrapper {
      width: 300px;
      height: 300px;  /* Angabe optional */
      padding: 40px;
    }
    #inner{
      height: 240px;  /* = [Höhe des #iWrapper] - [Gesamthöhe padding+border dieses Blockes] */
      border: 5px solid #ff0;
      padding: 25px;
      background-color: #fff;
    }
    </style>
  </head>
  <body>

    <div id="scrollbox">
      <div id="iWrapper">
        <div id="inner">im really oversized...!</div>
      </div>
    </div>

  </body>
</html>

Da die Höhe der Wrapper-Box durch die Höhe des #inner-Blockes bestimmt wird, kann die Höhendeklaration im #iWrapper-Selektor wegelassen werden. Ebenso ist die Angabe eines Breitenwertes im #inner-Selektor nicht notwendig, da dessen Breite durch den umschließenden #iWrapper-Block bestimmt wird.

Grüße retour.
 
Danke für die ausführliche Erklärung und der beigelegten Lösung! Hab das jetzt verstanden.

Da ich ja ursprünglich eine 1500px Box innen haben wollte hier nochmal mein abgeändertes Beispiel.

HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
		<title>Scrollbox with oversized content div</title>
	</head>
	<body>
	
		<!-- CSS -->
		<style>
		*{
			margin:0px;
			padding:0px;
		}
		body{
			background:#5286C1;
		}
		#scrollbox{
			border:1px solid #000;
			width:300px;
			height:300px;
			overflow:auto;
			/* padding:40px; */ /* padding kann/darf nur im #iWrapper angegeben werden */
			margin:10px;
		}
		#inner{
			height:1400px;
			/* width:1400px; */ /* angabe optional */
			border:5px solid #FFF000;
			padding:25px;
			margin:20px;
		}
		#iWrapper{
			width:1500px; /* = gesamtbreite (width+padding+border+margin) von #inner */
			/* height:1500px; */ /* angabe optional */
			padding:40px;
		}
		</style>
		<!-- /CSS -->
		
		<!-- HTML -->
		<div id="scrollbox">
			<div id="iWrapper">
				<div id="inner">im really oversized...!</div>
			</div>
		</div>
		<!-- /HTML -->

	</body>
</html>

Funktioniert :)

Danke und Grüße!
 
Zurück