✔ 100% Höhe ausnutzen.. wieder mal.

Status
Nicht offen für weitere Antworten.
splat

splat

Erfahrenes Mitglied
Hallo

Ich habe mir das Tutorial "CSS-Layout mit 100%-Höhe" von Maik angesehen, und nun habe ich hier ein 2-Spalten Layout mit Header und Footer, das sich jedoch über die gesamte Breite erstrecken soll. Und 100% Höhe natürlich..
Die Spalte leftCol und rightCol sind zwar am richtigen Platz, nur sollten sich diese nach Möglichkeit über den restlichen freien Platz erstrecken (orange). Siehe Anhang.

HTML: 
<html>
<head>
<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%;
}

/* DIV-Boxen */

div#wrapper {
position: relative;
margin: 0 auto;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background: orange;
}

div#header {
height: 80px;
background: red;
}

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

div#rightCol {
background: blue;
}

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

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

/* clearfix 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 */


/* Überschrift, Absatz */

h2 {
margin-left: 10px;
}
-->
</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>
     </div>
     <div id="footer">
          <h2>footer</h2>
     </div>
</div>
</body>
</html>

Sieht dort jemand einen Fehler? Habe schon viel probiert und herumgespielt.. aber alles weitere wäre jetzt nur noch gefrickel von mir :rolleyes:

Gruß
Marc
 

Anhänge

  • layout.jpg
    layout.jpg
    5,7 KB · Aufrufe: 68
Hallo Maik :)

hmm... also so weit hatte ich das ganze auch schon.
Aber wenn ich nun eine Hintergrundfarbe für rechts und links angebe, dann funktioniert das nicht.
Da muss man wohl immer Grafiken als Hintergrund verwenden, oder?

Gruß und danke :)
Marc
 
Achso, dann wäre das mit der Farbe auch geklärt.. :)
Ich wollte nämlich einige Farben sowie den Hintergrund ebenfalls, veränderbar haben.. daher die Frage, ob man das auch mit einer Hintergrundfarbe machen kann. Aber das mache ich nun anders.

position: absolute; für den footer habe ich noch auf relative gesetzt, ansonsten rutscht dieser nicht nach unten, falls die linke Spalte mal größer wird.

Vielen Dank für deine Hilfe! :)
Gruß
Marc

// EDI

Ach Mist... :eek:

Jetzt rutscht der Footer ja nach oben, wenn ich weniger an Inhalt habe.
Wie mache ich das denn nun, dass sich der Footer immer am unterean Rand befindet und gleichzeitig auch nach unten rutscht, wenn sich der Inhalt der linken Spalte vergrößert?
 
Ich weiss ja nicht, was du da so alles umgestellt hast, aber in meinem Beispiel von gestern wandert der Footer bei zunehmenden Inhalt nach unten - und das mit einer absoluten Positionierung am unteren Elementrand.
 
Umgestellt habe ich nichts. Der Footer wandert nach unten wenn man etwas in die rechte Spalte schreibt, nur bei der linken Spalte ist dies nicht so.

Aber ich glaube ich habe es jetzt:

Code: 
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
width: 100%;
}

div#wrapper {
position: absolute;
min-height: 100%;
height: auto !important;
height: 100%;
background: url(leftCol.png) repeat-y blue; /* Hintergrund für linke und rechte Spalte */
}

div#header {
	background: #66cc33;
	height: 50px;
}

div#leftCol {
	position: relative;
	background-color: #66cc33;
	width: 230px;
	float: left;
}

div#rightCol {
	margin-left: 230px;
	padding-bottom: 20px;
}

div#footer {
	position: relative;
	bottom: 0;
	background: #66cc33;
	height: 36px;
	clear: both;
}


#div.wrapper steht ebenfalls auf position: absolute; mit width: 100%.
Ansonsten wächst das Layout nicht nach rechts, falls etwas mal zur Seite hin größer wird.

Gruß
Marc
 
Mit der entgegengesetzten Positionierung (wrapper = absolute, footer = relative) sitzt der Footer bei mir aber nicht am unteren Elementrand, sondern richtet sich nach dem Inhalt, und hängt somit irgendwo mittendrin.

Und für das DIV #wrapper hatte ich gestern auch eine Breite von 100% definiert - hier nochmal der CSS-Code:

Code: 
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

div#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background: url(leftCol.png) repeat-y blue; /* Hintergrund für linke und rechte Spalte */
}

div#header {
height: 80px;
background: red;
}

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

div#rightCol {
margin-left: 200px;
padding-bottom: 20px;
}

div#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
clear: both;
background: yellow;
}
 
Sorry, ich meinte natürlich ohne width: 100% in div#wrapper :rolleyes:

Also so geht es bei mir nun:
Code: 
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

div#wrapper {
position: absolute;
min-height: 100%;
height: auto !important;
height: 100%;
background: url(leftCol.png) repeat-y blue; /* Hintergrund für linke und rechte Spalte */
}

div#header {
height: 80px;
background: red;
}

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

div#rightCol {
margin-left: 200px;
padding-bottom: 20px;
}

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

Der Footer geht nach unten, wenn sich etwas in leftCol vergrößert. Also größer als 100% der Fensterhöhe. Und day Layout geht auch nach rechts weiter, wenn der Inhalt länger ist als das Fenster.

Danke nochmal :)
Marc
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück