✔ 100% sind größer als 100%

Status
Nicht offen für weitere Antworten.
Microhome

Microhome

Erfahrenes Mitglied
Hallo ihr Lieben,
ich weiß das hört sich merkwürdig an! Ich hab echt keine Ahnung woran es liegt. Folgender Code der HTML Seite:

Code: 
<body>
<div style="height:210px; width:100%; background:#f0f0f0; border-bottom: 1px solid #cecece; text-align:center;">
	<div style="width:660px; text-align:center; margin:0 auto;">
		<div style="position:relative; top:20px;"><img src="images/logo.png"></div>
		<div style="position:relative; top:71px;">
			<span><img src="images/btn1_on.png"></span>
			<span style="margin-left:7px;"><img src="images/btn2_off.png"></span>
			<span style="margin-left:7px;"><img src="images/btn3_off.png"></span>
			<span style="margin-left:7px;"><img src="images/btn4_off.png"></span>
			<span style="margin-left:7px;"><img src="images/btn5_off.png"></span>
		</div>
	</div>
</div>

<div style="height:100%; width:100%; background:#fff; text-align:center;">
	<div style="width:660px; text-align:left; margin:0 auto;">
		<div style="width:600px; margin:20px; padding-top: 20px;">
		Hier der Inhalt
		</div>
	</div>
</div>

<div style="height:110px; width:100%; background:#f0f0f0; border-top: 1px solid #cecece; text-align:center;">
	<div style="width:660px; text-align:center; margin:0 auto;">
		<div style="position:relative; top:40px;">
			<small>blah blah - footer</small>
		</div>
	</div>
</div>
</body>


Die ganzen Style-Angaben packe ich später natürlich noch in meine CSS Datei. Darin stehen im Moment nur wenige Angaben:

Code: 
html, body {
	height: 100%;
	padding:0;
	margin:0;
}

body {
	background-color=#fff;
	font: 9pt arial;
	color: #333;
}

form {
	margin:0px;
	padding:0;
}

#footer {
	margin-top:5em;
	font-size:9pt;
	color:#333;
}

input {
	margin:0px;
	padding:0;

}

Ich möchte dass die mittlere Spalte im Prinzip mindestens so groß ist, dass die gesamte Seite mindestens 100% hoch ist. Wenn der Inhaltsteil größer ist, kommt ein Scrollbalken. Nur im Moment ist es so, dass die Seite nicht über 100% vom Inhalt groß ist aber dennoch kommt der Scrollbalken und ich kann ca. 500 Pixel nach unten scrollen.

Was mache ich falsch?


Besten Dank!
m!cro
 
Hi,

die height:100%-Deklaration des mittleren DIVs bezieht sich nicht auf ein Restmaß, sondern auf die vollständige Höhe des Browserfensters, weshalb nun nach unten gescrollt werden kann/muss.

In meinem CSS-Tutorial CSS-Layout mit 100%-Höhe stelle ich in dem zweiten Modell (Header und Footer) die Technik vor, die dir bei der Umsetzung weiterhilft.

Die vorgestellten Modelle beinhalten zwar floatende Spalten, aber die können hier auch ebenso entfernt werden. ;)
 
Hi Maik,
danke für die Antwort. Ich hatte schon statt height:100% den folgenden Code ausprobiert:
Code: 
min-height: 100%; height: auto !important; height: 100%;

Nur dabei kommt das selbe raus. Oder muss ich das ganze in diesen "Wrapper" packen, sprich diesen auf 100% setzen und die 3 SpaltenDIVs dort rein packen?


Beste Grüße!
m!cro
 
Guten Morgen :)

Mit dieser Regel richtest du für die Box eine Mindesthöhe von 100% ein, was in der derzeitigen Konstellation zum selben Resultat führt.

Code: 
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important;  /* !important-Regel für moderne Browser, um nachfolgende height-Deklaration zu ignorieren */
height: 100%; /* Mindesthöhe in IE <7 */

Das "wrapper"-DIV erhält diese Formatierung, nimmt alle Seitenbereiche in sich auf, und "übernimmt" den Hintergrund, der für die mittlere Zeile vorgesehen ist. Der Header und Footer überdecken ihn dann mit ihrem eigenen Hintergrund.

Um den "Footer"-Bereich nun am unteren Element- bzw. Fensterrand auszurichten, wird das "wrapper"-DIV relativ, und der "Footer" darin unten absolut positioniert.
 
Moin moin,
ich bekomme das nicht hin. Hab jetzt das "Wrapper"-DIV so eingesetzt:

Code: 
<body>
## header div wie oben ##
<div style="min-height: 100%; height: auto !important; height: 100%;">
   <div style="height:100%; width:100%; background:#fff; text-align:center;">
	<div style="width:660px; text-align:left; margin:0 auto;">
		<div style="width:600px; margin:20px; padding-top: 20px;">
		Hier der Inhalt
		</div>
	</div>
   </div>
</div>
## footer div wie oben ##
</body>

Kommt natürlich genau das selbe bei raus.. im Prinzip müssten ja ALLE DIVs, also Header, Content und Footer, in den Wrapper. Nur wenn ich das mache, dann "streckt" sich der Content-DIV nicht.. man man.


Beste Grüße!
m!cro
 
Wenn du meine Tutorial-Beispiele, insbesondere das Zweite mit "Header und Footer" richtig studiert hättest, stündest du jetzt nicht mehr vor den Problemen, denn bei mir funktioniert das Modell einwandfrei:

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">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Microhome</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
background:#fff;
}

#header {
height:210px;
background:#f0f0f0;
border-bottom: 1px solid #cecece;
}

#content {
padding-bottom:110px;
}

#footer {
position:absolute;
left:0;
bottom:0;
height:110px;
width:100%;
background:#f0f0f0;
border-top: 1px solid #cecece;
text-align:center;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="header">
          <div style="width:660px; text-align:center; margin:0 auto;">
                <div style="position:relative; top:20px;"><img src="http://www.tutorials.de/forum/images/logo.png"></div>
                <div style="position:relative; top:71px;">
                        <span><img src="http://www.tutorials.de/forum/images/btn1_on.png"></span>
                        <span style="margin-left:7px;"><img src="http://www.tutorials.de/forum/images/btn2_off.png"></span>
                        <span style="margin-left:7px;"><img src="http://www.tutorials.de/forum/images/btn3_off.png"></span>
                        <span style="margin-left:7px;"><img src="http://www.tutorials.de/forum/images/btn4_off.png"></span>
                        <span style="margin-left:7px;"><img src="http://www.tutorials.de/forum/images/btn5_off.png"></span>
                </div>
        </div>
     </div>
     <div id="content">
          <div style="width:660px; text-align:left; margin:0 auto;">
                <div style="width:600px; margin:20px; padding-top: 20px;">
                <p>Hier der Inhalt</p>
                <!-- Und ab hier temporär auskommentiert -->
                <!--<p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>
                <p>Hier der Inhalt</p>-->
                </div>
        </div>
     </div>
     <div id="footer">
           <div style="width:660px; text-align:center; margin:0 auto;">
                <div style="position:relative; top:40px;">
                        <small>blah blah - footer</small>
                </div>
           </div>
     </div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück