2 Problem (100% height)

Status
Nicht offen für weitere Antworten.
A

alex130

Erfahrenes Mitglied
Hallo,
ich hab 2 Probleme, das erste ist, dass ich ein 100% Height Layout haben will, das klappt aber nicht gnaz, wahrscheinlich hab ich wieder mal was übersehen...
Und das zweite ist, dass mein #footer ein wenig verrutscht ist.
Hier ist der Link: http://root.pcmasters.at/test
Ich hoffe mir kann jemand helfen.
Danke
 
Hi,

mein Vorschlag - arbeite mit einem alles umschliessenden Container. Dieser erhält die minimale Höhe von 100 Prozent.
Der Header wird ganz normal oben platziert. Der Footer dagegen relativ nach dem umschliessenden Container, allerding negativ in vertikaler Richtung veschoben.
Beispiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
  <!--
*{ margin: 0;
   padding: 0;}

html, body { height: 100%;}

body{ margin:0;
      padding:0;
      background: #44b9ef;}

#bodyDiv{ width: 841px;
          margin: 0 auto;
          background: #44b9ef url(images/container_body.jpg);
          min-height: 100%;        /* Mindesthöhe in modernen Browsern */
          height: auto !important; /* !important-Regel für moderne Browser */
          height: 100%;            /* Mindesthöhe in IE (<7) */}

#header { border-bottom: 0px solid #000;
          height: 142px;
          padding-top: 15px;
          background: #44b9ef url(images/container_head.jpg) 0 15px no-repeat;}

#head { margin: 0 auto;
        padding: 15px 30px 0;}

#container{ padding: 0 30px 78px;}

#container #body {}

#footer{ position: relative;
         width: 841px;
         height: 66px;
         margin: -66px auto 0;
         /*top: -66px;*/
         background: #44b9ef url(images/container_foot.jpg) 0 0 no-repeat;}
#foot{ padding: 0 30px;}
 //-->
</style>
</head>
<body>
<div id="bodyDiv">
  <div id="header">
    <div id="head">Header</div>
  </div><!-- ENDE - header -->

  <div id="container">
    <div id="body">
      <p>Lorem ipsum veri nonumy per id, eos mundi legimus te. Veniam timeam sit ut. Vim
	    in prima graeci, et mea liber nonummy. Mei stet vocent discere ut, no omnes tantas
	    eligendi vel. Ei pro duis porro adolescens, cu eros virtute ornatus eam.</p>

      <p>Illud posse dissentiet ad qui, quo eripuit deterruisset at. Vel primis scripserit
	    an, his persius veritus vivendo et. Et mea commune accumsan molestiae, est id velit
	    salutandi. Per modus iusto errem id. Cu eam novum oportere, te nec falli zzril. Ut
	    vim iisque legendos.</p>
    </div>
  </div>
</div><!-- ENDE - bodyDiv -->

<div id="footer">
  <div id="foot">Footer</div>
</div><!-- ENDE - footer -->
</body>
</html>
Konnte es aber nur im IE 6 sowie FF 1.5 und 3 testen.

Ciao
Quaese
 
Hallo,
danke nun funktioniert es...
Andere Frage, ich hab die Höhe auf 100% gesetzt, aber es ist ein Scrollbalken da, sollte der nicht erst kommen, wenn zu viel Text da ist?
Und weißt du was beim footer nicht passt?
Danke
 
In Quaeses Beispiel, wie auch in meinen Tutorial-Beispielen taucht bei mir kein Scrollbalken auf. Oder von welchem Quellcode sprichst du jetzt?

mfg Maik
 
Hi,
hab den Code oben vorher nicht gesehen...
Nun funktioniert es, aber der Header und Footer sollten 100% breit sein, kann ich den div #header einfach aus dem #bodyDiv raus nehmen und width auf 100% setzen?
LG Alex
 
Zuletzt bearbeitet:
Basierend auf Quaeses Quellcode würden die Änderungen im Stylesheet folgendermaßen lauten:

Code: 
#bodyDiv{ width: 100%;
          margin: 0 auto;
          background: #44b9ef url(images/container_body.jpg);
          min-height: 100%;        /* Mindesthöhe in modernen Browsern */
          height: auto !important; /* !important-Regel für moderne Browser */
          height: 100%;    
}

#container{ width:781px; margin:0 auto; padding: 0 30px 78px;}

#footer{ position: relative;
         width: 100%;
         height: 66px;
         margin: -66px auto 0;
         /*top: -66px;*/
         background: #44b9ef url(images/container_foot.jpg) 0 0 no-repeat;}
Am HTML-Code ändert sich dadurch nichts.

mfg Maik
 
Das liegt an der Dimension der beiden Hintergrundbilder für den Header und Footer, die weiterhin 841px breit sind, und sich somit im Viewport nicht auf 100% ausdehnen.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück