CSS - Anfängerproblem (100% height)

[no remorse]

Hallo

hab ein kleines aber nervendes CSS-Problem. Ich habe eine Vorlage mittels dem Standard frontend.css erstellt, welches 3 Blöcke enthält. Die Frage ist nun, wie ich den leftBlock und den rightBlock dazu kriege, eine 100%ige Höhe zu haben. D.H., ich möchte, dass diese zwei Böcke immer bis zum Footer gehen, egal wie viel Inhalt sie haben oder wie viel Inhalt der mainBlock hat.


CSS:

Code: Select all

/** 
 * Sample CSS for DIV pagelayout 
 */
#container {
	min-width: 760px;
	max-width: 1200px;
	  height: auto; 
   min-height:100%; 
	border: 1px solid gray;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

#headerBlock {
	padding: 5px;
	margin-bottom: 5px;
	background-color: rgb(213, 219, 225);
}

#mainBlock {
	height: auto; 
   	padding: 5px;
	margin-left: 215px;
	margin-right: 215px;
	background-color: gray;
}

#leftBlock {
	height: 100%;   /* fonktioniert nicht */
	float: left;
	width: 200px;
	margin-right: 5px;
	padding: 5px;
	background-color: rgb(235, 235, 235);
	clear: left;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
}

#rightBlock {
	float: right;
	
	width: 200px;
min-height:100%;
height:auto;
height:100%;
	margin: 0;
	margin-left: 5px;
	padding: 5px;
	background-color: rgb(235, 235, 235);
}

#footerBlock {
	clear: both;
	padding: 5px;
	margin-top: 5px;
	background-color: rgb(213, 219, 225);
}

HTML

Code: Select all

<div id="container">
  <div id="headerBlock">Raum für den Inhalt von  id "headerBlock"</div>
  <div id="leftBlock">
    <p>Raum für den Inhalt von  id </p>
<p>&nbsp;</p>
  </div>
  <div id="rightBlock">Raum für den Inhalt von  id "rightBlock"</div>
<div id="mainBlock">
    <p>Raum für den Insadfdsaf</p>
    <p>&nbsp;</p>
    <p>dsaf</p>
    <p>&nbsp;</p>
    <p>asdf</p>
    <p>sadf</p>
    <p>sdafhalt von  id "mainBlock"</p>
  </div>
  
  <div id="footerBlock">Raum für den Inhalt von  id "footerBlock"</div>
</div>

[top]

Ein beliebtes Problem.
Schau dir mal die Templates in der Intensivstation an.

[flip-flop]

Hi,

hier einige Templates von Bruno Fassino bzw. Big John´s Piefecta adaptiert für phpwcms: Templates/Vorlagen
Eine der Eigenarten: "Any column may be the longest" ("Jede Spalte kann am längsten sein").

Weiter unten wird auch gezeigt wie diese Technik funktioniert (Schaubilder).

Wenn gewünscht können diese Templates mit einem kleinen Script in die klassische Aufteilung in der Vorlage gebracht werden.
-> Einbinden der Felder "Kopfzeile:", "Fußzeile:", "links:", "rechts:" in "Haupt:"

Knut