✔ CSS-Layout Höhe ist größer als 100%

Status
Nicht offen für weitere Antworten.
Du hast mich falsch verstanden, denn du sollst nicht meine Komponenten in dein Seitenkonzept einpflanzen, sondern deine Inhalte (ohne absolute Positionierungen) in meine Vorlage einbetten.

Das wäre das "Grundgerüst", das ich auf zwei Spalten reduziert, sowie das Hintergrundbild (bg_pic.gif) im DIV #wrapper eingesetzt habe:

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>CSS-Layout mit 100%-Höhe (Header + Footer)</title>

<style type="text/css">
<!--
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%;
overflow: auto;
}

/* DIV-Boxen */

div#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
background: #6FAFAA repeat-y url(img/bg_pic.gif);
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

div#header {
height: 80px;
background: #fff;
border-bottom: 1px solid #b8b8b8;
}

div#leftCol {
width: 150px;
float: left;
}

div#rightCol {
margin: 0 0 0 150px;
}

div#leftCol, div#rightCol {
padding-bottom: 25px;
}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #b4b4b4;
}


/* clearfix-Klasse zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="header">
          <h2>header</h2>
     </div>
     <div id="leftCol">
          <h2>leftCol</h2>
     </div>
     <div id="rightCol">
          <h2>rightCol</h2>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>

          <!-- Ab hier kommentiere ich den nachfolgenden Inhalt aus, -->
          <!-- um zunächst die Mindesthöhe im Viewport, -->
          <!-- sowie die Positionierung des Footers zu demonstrieren -->

          <!-- Einfach den HTML-Kommentar entfernen, um die Wirkung zu sehen -->
          <!-- wie sich das Modell bei zunehmenden Inhalt verhält -->

          <!--<p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          <p>some dummy text to expand the box</p>
          - END - -->
     </div>
     <div id="footer">
          <h2>footer</h2>
     </div>
</div>

</body>
</html>
mfg Maik
 
OK:) Das hab ich grad wohl mit dem falschen File aus dem zip gemacht...
aber ich hab jetzt dein gepostetes hergenommen und mal den
- header angepasst
- leftCol und rightCol auf margin 200x angepasst.

Nun geb ich mal in die rechte Spalte die div-rein und schau mal was passiert. Hau alle absolut raus...
 
So weit so gut....
ich hab die div-eins, zwei, drei vier nun drinnen
Diese werden auch richtig dargestellt:) *freu*
Allerdings macht er nun nicht mehr den Hintergrund wo der Inhalt drinnen steht bis unten hin:

HTML: 
#eins {

	font-weight:bold;

	font-size:10pt;

	line-height:2em;

	height:20px;

	color:#D5E4EE;

	padding-left:5px;

	padding-right:5px;

	text-align:right;

	}

#zwei {

	/*** top:25px;

	left:0px; ***/

	/*** background-color:#D5E4EE;

	background-image:url(img/layout_035_7.jpg);

	background-repeat:no-repeat; ***/

	height:25px;

	width:100%;

	background-color:#D5E4EE;

	}





#drei {

	/*** position:absolute;

	top:50px;

	left:0px; ***/

	width:100%;

	height:3px;

	line-height:3px;

	margin:0px;

	padding:0px;

	background-color:#6FAFAA;

	}



/* vier - hier ist der eigentlich Inhalt drinnen */

div#vier {
	/***

	position:absolute;

	top:53px;

	left:0px;

	bottom:0px; ***/

	background-color:#D5E4EE;

	width:100%;

	}	

#top_navigation {

	/* position:absolute; */

	/* top:30px; */

	/* left:35px; */

	width:100%;

	height:25px;

	}
 
Ist die Seite irgendwo online erreichbar?

Ansonsten zeig doch bitte mal den aktuellen Quellcode in seiner vollständigen Fassung.

mfg Maik
 
Hier der ganze Quellcode;

HTML: 
<!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>CSS-Layout mit 100%-Höhe (Header + Footer)</title>

<style type="text/css">
<!--
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%;
overflow: auto;
}

/* DIV-Boxen */

div#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
background: #6FAFAA repeat-y url(img/bg_pic.gif);
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

div#header {
background-image:url(img/layout_035_2.jpg);
background-repeat:repeat-x;

margin:0px;

}

div#leftCol {
width: 200px;
float: left;
}

div#rightCol {
margin: 0 0 0 200px;
}

div#leftCol, div#rightCol {
padding-bottom: 25px;
}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #b4b4b4;
}


/* clearfix-Klasse zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* CONTENT VORBAU */

#eins {

	font-weight:bold;

	font-size:10pt;

	line-height:2em;

	height:20px;

	color:#D5E4EE;

	padding-left:5px;

	padding-right:5px;

	text-align:right;

	}

#zwei {

	/*** top:25px;

	left:0px; ***/

	/*** background-color:#D5E4EE;

	background-image:url(img/layout_035_7.jpg);

	background-repeat:no-repeat; ***/

	height:25px;

	width:100%;

	background-color:#D5E4EE;

	}





#drei {

	/*** position:absolute;

	top:50px;

	left:0px; ***/

	width:100%;

	height:3px;

	line-height:3px;

	margin:0px;

	padding:0px;

	background-color:#6FAFAA;

	}



/* vier - hier ist der eigentlich Inhalt drinnen */

div#vier {
	/***

	position:absolute;

	top:53px;

	left:0px;

	bottom:0px; ***/

	background-color:#D5E4EE;

	width:100%;

	}	

#top_navigation {

	/* position:absolute; */

	/* top:30px; */

	/* left:35px; */

	width:100%;

	height:25px;

	}

a.top_link {

	display:block;

	position:absolute;

	font-family:Verdana, sans-serif;

	font-size:10pt;

	text-decoration:none;

	color:#1266A4;

	margin-left:35px;

	}

a.top_link:link, a.top_link:visited {

	color:#1266A4;

	}

a.top_link:hover, a.top_link:active {

	color:#FFFFFF;

	background-color:#1266A4;

	}

a#ziele {

	bottom:0px;

	text-decoration:none;

	}

a#statuten {

	bottom:0px;

	left:40px;

	text-decoration:none;

	}


-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
     <div id="header">
          <img src="img/layout_035_1.jpg" width="640" height="96" alt="Logo">
     </div>
     <div id="leftCol">
          <h2>leftCol</h2>
     </div>
     <div id="rightCol">
          <div id="eins">



					xyuser angemeldet | abmelden | <img src="img/sitemmap.gif" alt="Button Sitemap" align="bottom"> | 

								<span style="font-size:8pt">A</span><span style="font-size:10pt">A</span><span style="font-size:12pt">A</span></div>

			<div id="zwei"><img src="img/layout_035_7.jpg" width="33" height="25" id="balken" alt="Test">

					<div id="top_navigation">

								<a href="ziele.html" class="top_link" id="ziele">Ziele</a> 

								<a href="statuten.html" class="top_link" id="statuten">Statuten</a></div> 

										</div>

			<div id="drei">&nbsp;</div>

			<div id="vier">

			

			<h1>&Uuml;berschrift</h1>

					<p>Lorem ipsum sdf sjdflk jsdfkl sdjfkl sdjkfl dsfjkl djsfkl dsjfl dsjklf dsflk djsfkl djksfl dsjfkl sd

					sdjf sdjklf djsfk djsfkl djsf sdjklf sdjlf djlsfk sdjlf sdjklf djsklf djskl fj sdf dsf sdf </p>

					<p>Das ist ein <a href="test.html">Link</a>.</p>

					<h2>&Uuml;berschrift 2</h2>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p><p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>

					<p>Lorem ipsum</p>
					

				

			</div>
    </div>
    <div id="footer"><h2>footer</h2></div>
</div>

</body>
</html>
 
In diesem Fall mußt du die Hintergrundfarbe für den Inhalt der Box #vier im DIV #wrapper angeben, da dies das einzige Element in dem Modell ist, das sich vom oberen bis zum unteren Fensterrand erstreckt, die Box #vier hingegen erhält ihre Höhe lediglich durch ihren Inhalt.

Code: 
div#wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
background: #D5E4EE repeat-y url(img/bg_pic.gif);
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}
Alle übrigen Bereiche innerhalb dieses DIVs, die den Hintergrund-Farbwert "#6FAFAA" besitzen sollen, erhalten dann die entsprechende Formatierung mit der background-Eigenschaft.

mfg Maik
 
Ok, habe ich gemacht, aber dann richtet sich ja wieder die Navigation links wie auch der Inhalt rechts nach der laenge des Inhalts in diesem div.

Das ist ja genau das was bis runter gehen soll, egal ob wenig oder mehr Inhalt drinnen ist.
 
Sorry, ich kann dir gerade nicht ganz folgen.

Das Hintergrundbild "bg_pic.gif" im DIV #wrapper soll doch den Hintergrund für die Navigation erzeugen, oder etwa nicht?

Soll sich dieser Spaltenhintergrund etwa nicht bis nach unten zum Footer erstrecken?

Ich bitte um Aufklärung, wie du dir das Seitenkonzept im Detail vorstellst, bevor wir hier aneinander vorbeireden und -entwickeln - vielen Dank!

mfg Maik
 
Und er macht jetzan unter dem Header vor dem Tuerkis einen Hellblauen Rand.
Das Div=zwei mit div=top_navigation wird ebenfalls nicht dargestellt...

Fragen ueber Fragen..
 
Es wäre ganz sinnvoll und angebracht, wenn du allmählich die Seite auf einen Server lädst, und hier den Link zu ihr nennst, damit man sich das live anschauen kann, und deine "Baufortschritte" mitverfolgen kann.

Außerdem warte ich noch auf deine detailierte "Baubeschreibung", wie sich nun die beiden Spalten in ihren Höhen im Viewport verhalten sollen.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück