✔ Div 100% height style probleme

[mardusi]

html { 
  padding:0px;
  margin:0px;
  height: 100%;
}

body {
  background-color: #e1ddd9;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;  
  padding:0px;
  margin:0px;
  height: 100%;
}

#container {
  
  margin: 0px 200px 0px 200px;
  border-left: 2px solid #564b47;
  border-right: 2px solid #564b47;
  padding: 0px;
  background-color: #ffffff;
  height:100%;
}

#header{
 padding: 0px;
 background-color: #99FF00;
 height:100px;
}

#navigation{
 padding: 0px;
 background-color: #99FF99;
 height:50px;
}

#footer{
 position:relative;
 padding: 0px;
 background-color: #99FF00;
 height:100px;
}

<div id="container">
<div id="header">div_header</div>
<div id="navigation">div_navigation</div>
</div>

so da ich noch relativer frisch in diesem gebiet bin und gerade verzweifle wie ich erstes das so hinbekomme das mein inhalt oder der navigation variable ist und 2 der footer immer unten

büdde um hilfe

 

[Maik]

Hi,

vielleicht hilft dir da dieses Modell weiter?

* {
  margin:0;
  padding:0;
}

html,body {
  height:100%;
}

body {
  background-color: #e1ddd9;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;
}

#container {
  position:relative;
  margin: 0 200px;
  border-left: 2px solid #564b47;
  border-right: 2px solid #564b47;
  background-color: #ffffff;
  min-height:100%;
  height:auto !important;
  height:100%;
}

#header{
 background-color: #99FF00;
 height:100px;
}

#navigation{
 background-color: #99FF99;
 height:50px;
}

#content {
padding-bottom:100px; 
}

#footer{
 position:absolute;
 bottom:0;
 background-color: #99FF00;
 width:100%;
 height:100px;
}

<div id="container">
     <div id="header">div_header</div>
     <div id="navigation">div_navigation</div>
     <div id="content">div_content</div>
     <div id="footer">div_footer</div>
</div>

 

[mardusi]

wie is das mit dem main_content einfach zwischen den 2 div setzen oder wie ?

<div id="container">
     <div id="header">div_header</div>
     <div id="navigation">div_navigation</div>
	inhalt ..
     <div id="footer">footer</div>
</div>

oder kommt da ein extra div ? weil wil mit php arbeiten und includen und sowas

 

[Maik]

Ich hab kurz vor deiner Antwort meinen CSS- und HTML-Code dementsprechend erweitert

 

[mardusi]

danke schön

 

[mardusi]

so jetzt hatte ich wieder zeit zum bearbeiten meiner page

> musste ja erstmal div mit meinem php dateien verbinden
> nun kommt aber wieder nen problem mit meinem content und hoffe ihr könnt helfen

>> so sieht es derzeit aus http://www.downtownraiderz.de/test.php?content=./pixlie/pixlie.php

<div id="container">
     <div id="header"><?php include("dtr_top.php"); ?></div>
     <div id="navigation"><?php include("navigation.php"); ?></div>
     <div id="content"><?php include("dtr_main.php"); ?></div>
     <div id="footer">footer</div>
</div>

html,body {
  padding:0;
  margin:0;
  height:100%;
  background-image:url(images/carbon_bg.gif)
}

body {
  background-color: #e1ddd9;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;
}

#container {
  position:relative;
  margin: 0px 150px 0px 150px;
  padding: 0;
  background-color: #ffffff;
  min-height:100%;
  height:auto !important;
  height:100%;
}

#header{
 padding:0;
 height:100px;
 background-image:url(images/carbon_bg.gif)
}

#navigation{
 padding:0;
 background-color: #99FF99;
 height:20px;
}

#content {
padding-bottom:100px;
}

#footer{
 position:absolute;
 bottom:0;
 padding:0;
 background-color: #99FF00;
 width:100%;
 height:100px;
}

und hier meine include datei für den content

<table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="DTR_Balken">&nbsp;</td>
    </tr>
  </table>
  <table border="0"" cellpadding="0" cellspacing="0" class="DTR_Balken" width="100%" style="height:auto;" ">
    <tr>
      <td align="left" valign="top" class="DTR_box"><?php
	// Abfrage Schleife f&uuml;r Contentbox
 
	$content = $_GET['content'];

 	if($content!="")
	 { 
  	include("$content"); 
	} 
	else
	{
	include("news.php");
	}
?>
</td>
    </tr>
  </table>

 

[Maik]

Hi,

> nun kommt aber wieder nen problem mit meinem content

könntest du auch darauf näher eingehen, wo das Problem nun konkret ist?

Falls du die Unterbrechung des Hintergrundbildes zum Footer meinst, empfehle ich dir, das Content-Hintergrundbild stattdessen im übergeordneten DIV #container einzubinden.

Und bitte halte dich in deinen Beiträgen an die Netiquette bzgl. der Groß- und Kleinschreibung. Vielen Dank.

 

[mardusi]

Joa also das Problem was ich habe ist das content bis unten an den Footer gehen soll. Was er ja derzeit nicht macht .. welches man am weißen Rand sehen kann

Hab mal ein Picture hochgeladen

Muss noch dazu sagen das es bei Firefox anders aussieht als bei IE7

 

[Maik]

Hab meinen letzten Post dahingehend schon editiert und den entscheidenden Tipp reingeschrieben.

 

[Maik]

Der Screenshot wäre nicht nötig gewesen, denn die Seite kann man ja direkt betrachten.

Wie gesagt, binde das Hintergrundbild für den Content im übergeordneten DIV #container ein, dann reicht es auch runter bis zum Footer.