✔ div height 100%

Status
Nicht offen für weitere Antworten.
crashx

crashx

Erfahrenes Mitglied
Ich habe ein DIV um die Website zusammen zu halten.
Nun wollte ich ein background-image hinzufügen, was auch prächtig funktioniert hat.
Doch wenn der Seiteninhalt grösser ist als das Fenster und man Scrollen muss, geht das DIV nicht mit, sprich bleibt bei den 100% fenster grösse stehen.

Problem taucht bei FF 2.0, 1.5 und bei den Netscape Browsern auf.

PRoblem wird der <div class="holder"> sein
CSS:
Code: 
html, body{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  text-align: center;
  font-family: arial;
  background-image: url(../images/back_v.jpg);
  background-repeat: repeat-x;
  font-size: 12px;
}
a:link, a:visited, a:active{
  color: #000000; 
  text-decoration: none; 
}
a:hover{
  color: #999999;
  text-decoration: none;
}
img{
  margin: 0 auto;
  border: 0px;
}
div.holder{
  margin: 0 auto;
  padding: 0px;
  border: 0px;
  width: 800px;
  height: 101%;
  background-image: url(../images/back_h.jpg);
  background-repeat: repeat-y;
  display: block;
}
div.top{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  width: 800px;
  height: 180px;
  background-image: url(../images/top.jpg);
}
div.top_content1{
  margin: 130px 0 0 0;
  border: 0px;
  padding: 0px;
  width: 723px;
  text-align: right;
  float: left;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
}
div.top_content2{
  margin: 10px 0 0 0;
  border: 0px;
  padding: 0px;
  width: 723px;
  text-align: right;
  float: left;
  font-size: 13px;
  letter-spacing: 0px;
}
div.content{
  margin: 0 auto;
  border: 0px;
  padding: 0px;
  width: 650px;
  text-align: left;
}

PHP:
PHP: 
<?php
include('com/connect.php');
echo '<html>';
  echo '<head>';
    echo '<link href="css/layout.css" rel="stylesheet" type="text/css" />';
  echo '</head>';
  echo '<body>';
    echo '<div class="holder">';
      echo '<div class="top">';
        echo '<div class="top_content1">';
          echo 'Wirte der Willisauer Napfregion';
        echo '</div>';
        echo '<div class="top_content2">';
          $sql = "SELECT * FROM `navigation`
			      ORDER BY `pos` ASC
			     ";
		  $result = mysql_query($sql);
		  while($row = mysql_fetch_array($result)){
			  echo '<a href="'.$row['url'].'">';
			    echo $row['titel'];
			  echo '</a>&nbsp;|&nbsp;';
          }
        echo '</div>';
      echo '</div>';
      echo '<div class="content">';
        //-------content--------------------------------------------
        
        $string = $_SERVER['PHP_SELF'];
        $string = explode('/', $string);
        $sql = "SELECT * FROM `content`
		        WHERE `allocate` = '".mysql_real_escape_string($string[2])."'
		        ORDER BY `pos` ASC
			   ";
		$result = mysql_query($sql);
		while($row = mysql_fetch_array($result)){
		  if($row['class'] == 'titel'){
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
		  }
		  if($row['class'] == 'design1'){
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
		  }
		  if($row['class'] == 'design2'){
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</a>';
			echo '</div>';
		  }
		  if($row['class'] == 'design3'){
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</a>';
			echo '</div>';
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
		  }
		  if($row['class'] == 'design4'){
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</a>';
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img1'].'&i=img1\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img1'].'">';
			  echo '</a>';
			echo '</div>';
		  }
		  if($row['class'] == 'design5'){
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</a>';
			echo '</div>';
		  }
		  if($row['class'] == 'design6'){
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</a>';
			echo '</div>';
		  }
		}
        
        //---------------------------------------------------------
      echo '</div>';
    echo '</div>';
  echo '</body>';
echo '</html>';
?>

Anbei noch eine Visuelle darstellung des problemes.

Danke für euer Hilfe.
 

Anhänge

  • wina.jpg
    wina.jpg
    117,4 KB · Aufrufe: 48
Hi,

mal ein Versuch ins Blaue hinein.

Du hast im Element holder eine feste Höhe zugewiesen. Hier solltest du besser mit min-height für moderne Browser arbeiten.
Code: 
div.holder{
  margin: 0 auto;
  padding: 0px;
  border: 0px;
  width: 800px;
  height: auto !important; /* moderne Browser */
  height: 101%; /* IEs - Höhe wird an den Inhalt angepasst */
  min-height: 101%;  /* minimale Höhe für moderne Browsern */
  background-image: url(../images/back_h.jpg);
  background-repeat: repeat-y;
  display: block;
}
Sollte damit das Problem nicht gelöst sein, bitte den geparsten Quellcode posten - der PHP-Code mit den Datenbankabfragen und Includes hilft da nur bedingt weiter.

Ciao
Quaese
 
Danke für die Antwort.

Ich konnte das Problem eingrenzen, und es hat nicht mit dem div.holder zu tun, sondern mit float: left;

in den von der datenbank geholten inhalten.
CSS:
Code: 
div.design4{
  margin: 0 0 6px 10px;
  padding: 0px;
  border: 0px;
  width: 580px;
  text-align: justify;
}
  div.design4_img{
    margin: 0 0 6px 10px;
    padding: 0px;
    border: 0px;
    width: 290px;
    float: left;
  }

PHP: 
if($row['class'] == 'design4'){
			echo '<div class="'.$row['class'].'">';
			  echo nl2br($row['text']);
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img0'].'&i=img0\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img0'].'">';
			  echo '</a>';
			echo '</div>';
			echo '<div class="'.$row['class'].'_img">';
			  echo '<a href="#" OnClick="javascript: fenster(\'pcview.php?img='.$row['img1'].'&i=img1\',\'Picture view 1.0\',600,500)">';
			    echo '<img src="thumb/thumb_'.$row['img1'].'">';
			  echo '</a>';
			echo '</div>';
		  }
wenn ich den Wert float: left; weg lasse zeigt es mir das div.holder über die ganze Seite an, jedoch stimmt die positionierung der <div class="'.$row['class'].'_img"> nicht mehr da zwei neben einander angezeigt werden.

vielleicht hierzu jemand einen hilfreichen tipp.
 

Anhänge

  • wina1.jpg
    wina1.jpg
    69,3 KB · Aufrufe: 18
  • wina2.jpg
    wina2.jpg
    71,5 KB · Aufrufe: 16
Zuletzt bearbeitet:
Hi,

stelle vor dem Schliessen des Contentbereichs den normalen Textfluss (clear: both) wieder her.

CSS:
Code: 
.clearDiv{ font-size: 1px;
           line-height: 0em;
           height: 0;
           clear: both;}
PHP/HTML:
Code: 
<?php
include('com/connect.php');
echo '<html>';
  echo '<head>';
    echo '<link href="css/layout.css" rel="stylesheet" type="text/css" />';
  echo '</head>';
  echo '<body>';
    echo '<div class="holder">';
      echo '<div class="top">';
        echo '<div class="top_content1">';
          echo 'Wirte der Willisauer Napfregion';
        echo '</div>';
        echo '<div class="top_content2">';
          $sql = "SELECT * FROM `navigation`
                  ORDER BY `pos` ASC
                 ";
          $result = mysql_query($sql);
          while($row = mysql_fetch_array($result)){
              echo '<a href="'.$row['url'].'">';
                echo $row['titel'];
              echo '</a>&nbsp;|&nbsp;';
          }
        echo '</div>';
      echo '</div>';
      echo '<div class="content">';
        //-------content--------------------------------------------
        // ...        
        //---------------------------------------------------------
        echo("<div class=\"clearDiv\">&nbsp;</div>");
      echo '</div>';
    echo '</div>';
  echo '</body>';
echo '</html>';
?>
Im Übrigen wäre es schön gewesen, wenn du den geparsten Quellcode gepostet hättest.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück