✔ div-Box über die ganze Höhe einer Page

Status
Nicht offen für weitere Antworten.
WindowShopper

WindowShopper

Mitglied
Hi,
*auf die uhr schau*
Hm, ich probier da jetzt schon ca. 2h dran 'rum und hab' auch sonst keine Antwort auf mein Problem gefunden... Jetzt probier ich's einfach mal hier..
Aaaalso..

Ich will eine div-Box erstellen, die von sich von oben nach ganz unten streckt.
Ich dachte, das wäre nicht allzu schwer, hat alles geklappt, doch dann kamen durch ein zweites div (mit viel Inhalt) Scrollbalken dazu. Die Page wurde also länger, die div-Box blieb aber auf ihrer Größe, die sie hatte, als es noch keinen Scrollbalken gab.

Ich hab euch mal den unwichtigen Code 'rausgestrichen:
Code: 
<!doctype html public "-//W3C//DTD HTML 3.2 //EN">
<html>
<head>
<title>Test</title>

<style type="text/css">
body, html {
	margin:0; height:100%; /* Da IE min-height nicht kennt */
	min-height:100%; /* Für andere Browser */
}
#container {
	min-height:100%;
	height:auto !important; /* Für normale Browser */
	height:100%; /* Für IE */
	width:100%;
	background-color:red;
	position:absolute;
}
#anderer {
	position:absolute;
}
</style>
</head>

<body>

<div id="container"></div>

<div id="anderer">
  Text<br>
  der<br>
  den<br>
  Scrollbalken<br>
  erzeugt<br>
  Blubb<br>
  Blubb<br>
  Blubb<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

</body>

Also ich bin echt ratlos... wenn ich ins css von body einen rahmen reinsetze, dann seh ich, dass sich nicht die div-box nicht anpasst, sondern der ganze body bleibt bei der alten Größe.

Ich hoffe das Problem ist nicht unlösbar *gg*
Bis denne...
 
Zuletzt bearbeitet:
Hi,

damit die Höhe der Box #container im Kontext zum Inhalt der Box #anderer zunimmt, und so der rote Hintergrund beim Scrollen der Seite nach unten sichtbar bleibt, gehört letztere in erstere Box eingebettet und darin nicht absolut positioniert, sofern sie nicht am unteren Elementrand positioniert werden soll, um dort als "Footer"-Bereich zu fungieren.

Der Qullcode würde dann folgendermaßen lauten:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<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;
        height:100%;
}

#container {
        min-height:100%;
        height:auto !important; /* Für normale Browser */
        height:100%; /* Für IE */
        width:100%;
        background-color:red;
        position:absolute;
}

#anderer {
        position:relative;
}
</style>
</head>

<body>

<div id="container">
     <div id="anderer">
          Text<br>
          der<br>
          den<br>
          Scrollbalken<br>
          erzeugt<br>
          Blubb<br>
          Blubb<br>
          Blubb<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     </div>
</div>

</body>
</html>
 
Der Hintergrund des Dokumentkörpers würde sich in der ursprünglichen Konstellation mit dieser Regel "ändern" bzw. erweitern:

Code: 
body {
background:red;
}
 
ja okay, klar, aber wenn ich in deiner ersten lösung einen rahmen um den body setze, also das ins css schreibe, dann ist der body immernoch nicht 100% vom dokument, und das will ich eben verstehen, warum das so ist...
 
Hierfür dürften die Boxen im Viewport nicht absolut positioniert werden, da sie auf diese Weise aus dem normalen Textfluss herausgenommen werden.

Zudem ist in diesem Fall die height:100%-Deklaration für den Viewport hinderlich, da sie von den modernen Browser als fixe Höhe interpretiert wird, und die Regel dementsprechend umgeschrieben werden müsste:

Code: 
body, html {
        margin:0;
        min-height:100%;
        height:auto !important;
        height:100%;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück