Height 100% wird falsch dargestellt

phraid · #1 (**permalink**) 22.10.2004, 14:29

Hi, ich versuche gerade ein Layout mit css zu erstellen.
Ich erkläre mal schnell wie es aussieht:

Ich habe einen gesamten DIV Bereich wo die anderen Bereiche hinein sollen. In Diesen habe ich oben einen 75px und 100% breiten bereich reingemacht der sozusagen den Banner darstellen soll. Dann habe ich unten drunter noch auch einen div bereicht gemacht wo der inhalt rein soll, dieser ist 100% breit und hoch. Der untere bereich mit dem Inhalt zieht sich aber runter, so das auf der linken Seite ein scrollbalken entsteht. Ich möchte aber das dieser nur so groß ist das man keinen scrollbalken braucht. Warum passt sich dieser untere Div bereich nicht dem gesamt Div bereich an obwohl er da drin ist?

mein code (ist noch ein bisschen mehr drin aber alles nur zum testen)

Code:

<html>
<head>
<title>F+S Software GmbH | Tilsiter Str.12 | 64354 Reinheim | Telefon: 06162/93100 FAX: 

06162/931030</title>
<style type="text/css">

 body
     {
      background-color:#888888;
      font-family:Verdana;
      font-size:10pt;
      margin:0px;
      padding:0px;
     }
 div#a
      {
       background-color:#777777;
       border-color:#000000;
       border-style:solid;
       border-width:0px 1px 0px 0px;
       height:100%;
       margin:0px 15% 0px 0px;
       padding:0px;
       width:100%;
      }
 div#banner
      {
       background-color:#FFFFFF;
       height:75px;
       margin:0px;
       padding:0px; 
       width:100%;
      }
 div#banner2
      {
       background-color:#EEEEEE;
       border-color:#DDDDDD;
       border-style:double;
       border-width:0px 1px 0px 1px;
       height:100%;
       margin:0px 15% 0px 65%; 
       padding:0px;
       width:100%;
      }
 div#black
      {
       background-color:#555555;
       height:100%;
       margin:0px 0px 0px 0px;
       padding:0px;
       width:100%;
      }

</style>
</head>

<body>
<div id="a">
 <div id="banner"></div>
 <div id="black"></div>
</div>
</body>
</html>

terrikay · #2 (**permalink**) 22.10.2004, 14:36

Du kannst mit CSS nicht 100%-75px angeben, was Du aber müßtest, um das zu realisieren.

Da muß man dann tricksen...

Wenn ich nachher Lust habe, mache ich mal eine dauerhafte Testseite dafür, die ich dann hochlade - hier im Forum hab ichs schon ein paarmal vorgemacht - aber z.Zt. keinen passenden Code z.Hand. Mußt Dich noch ein wenig gedulden...

terrikay · #3 (**permalink**) 22.10.2004, 19:57

Hier mal etwas Code für Dich - bitte anschauen.

Wenn es Fragen gibt, dann hak nochmal nach.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>height:100%-Probleme</title>
<style type="text/css">

html {height:100%;} /*sonst weiß der body nicht, wie hoch er sein soll*/

body {
      height:100%;         /*damit der body 100% hoch ist*/
      margin:0;
      padding:0;          /*für Opera*/
      background-color:#c0c0c0;
      color:black;
      font:100.01%/1.3 verdana, sans-serif;
      }
      
p     {margin:1.5%}      
      
#hauptcontainer {
      background-color:#fff;
      color:black;
      width:40em;
      min-height:100%; /* nur der äußere Container bekommt die Höhe */
      }

          /*nur für IE*/      
* html #hauptcontainer {/* IEMac aussperren \*/
      height:100%;
      /* damit IEMac den Kommentar wieder schließt */}      
    
#header {
      background-color:red;
      height:75px;
      }
      
#inhalt {    
      border:1px solid #000; /*Damit man sieht, wo der innere Container genau liegt*/
      }          

</style>
</head>
<body>
<div id="hauptcontainer">
<div id="header"> </div>
<div id="inhalt">


Damit ein Container 100% hoch werden kann, müssen beide Elternelemente (body und html) ebenfalls
100% hoch definiert werden. 

Man kann auch immer nur einen äußeren Container 100% hoch werden lassen - Rechenspiele (100% - 75px) 
funktionieren mit CSS nicht. Alle weitern Container müssen innerhalb des Containers positioniert werden.</p>


Ein Problem gibt es noch bei dem Code: 

wird der Inhalt größer als ein Viewport (eine Monitorhöhe) - so wird er zwar angezeigt, aber der äußere
Container wächst nicht mit, wenn man nur height:100% angibt - die Hintergrundfarbe endet dann also irgendwo.

Möchte man das nicht, so muß man min-height für den Hauptcontainer angeben - dem IE dann extra noch
ein height mitgeben - s. CSS.</p>

</div> 
</div> 
</body>
</html>

toscho · #4 (**permalink**) 22.10.2004, 20:09

Zitat:

Zitat von terrikay

*html #hauptcontainer {height:100%;} /*nur für IE*/

Aufpassen: Das ist invalid; zwischen dem Universalselektor und dem html muß ein Leerraum stehen. Außerdem erwischt man so auch den IE 5 Mac, der auf denselben Bug hereinfällt. Besser:

Code:

* html #selector {
    /* IE Mac rausfiltern: \*/
    Eigenschaft: Wert;
    /* Hier erst schließt IE Mac den Kommentar. */
}

Gruß
Thomas

terrikay · #5 (**permalink**) 22.10.2004, 20:35

Danke für die Anmerkung, Thomas - habs oben geändert.

Grüße, Terry

toscho · #6 (**permalink**) 23.10.2004, 00:56

Ich glaube, das Leerzeichen vor dem \*/ spielt eine Rolle … kann’s jetzt aber nicht testen.

Gruß
Thomas

terrikay · #7 (**permalink**) 23.10.2004, 11:03

Gut - dann also mit Leerzeichen - kann ja nicht schaden... Wird oben geändert.

Grüße, Terry

phraid · #8 (**permalink**) 24.10.2004, 16:39

also irgendwie kapier ich jetzt nicht was ich bei meinem code ändern muss damit es richtig angezeigt wird.

Ich hab mal einen Testcode gebastelt aber ich bekomm es nicht hin.

Code:

<html>
<head>
<style type="text/css">
 html
     {
      height:100%;
     }
 body
     {
      background-color:#333333;
      color:#FFFFFF;
      font-family:Verdana;
      font-size:8pt;
      height100%;
      margin:0;
      padding:0;
     }
 #context
        {
         background-color:#555555;
         border-color:#777777;
         border-style:solid;
         border-width:0 1px;
         height:100%;
         margin:0 10%;
         width:100%;
        }
 #top
     {
      background-color:#444444;
      border-color:#575757;
      border-style:solid;
      border-width:0 0 1px 0;
      height:60px;
      width:100%;
     }
 #middle
         {
          background-color:#000000;
          height:100%;
          width:100%;
         }

</style>

<title></title>

</head>
<body>

<div id="context">
 <div id="top"></div>
 <div id="middle"></div>
</div>

</body>
</html>

terrikay · #9 (**permalink**) 24.10.2004, 22:30

Du kannst nicht #middle 100% Höhe geben, wenn Du darüber einen weiteren Container hast!
Nur der äußere Container #context darf 100% haben! #middle darf keine Höhe haben - bitte schau Dir mein Beispiel an - da steht alles genau beschrieben!

Noch ein paar Dinge an Deinem Code:

1. width:100% ist überflüssig! - Container werden immer 100% breit, wenn man sie läßt.

2. 8pt für die Schrift: wer soll das lesen können? Auf Mac und Linux sind das 8px! - pt ist eine Angabe für den Druck, nicht für den Bildschirm. Nimm am besten relative Werte (%, em) für die Schriftgröße.

3. Du solltest Deinem Dokument noch einen Doctype verpassen.

phraid · #10 (**permalink**) 25.10.2004, 12:03

ok, danke für die Infos. Ich hab mir dein Beispiel angeschaut aber irgendwie zeigt es mir nicht das, wie ich es mir vorstell. Du stellst in deinem Beispiel einen Hauptcontainer + 2 innen liegende dar. Aber der untere innenliegende ist ja nicht 100% hoch sondern nur so hoch wie das Textfeld. Ich möchte aber auch das dein sogenannter "Inhalt" Container 100% hoch ist. Auf deutsch gesagt versuche ich einen Container 100% groß zu machen wo schon ein z.b 100px hoher Container oben drüber liegt.

[/img]

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Spry Menü bar falsch dargestellt im IE	Hilltono	CSS	2	02.12.2010 22:01
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
z-index hoch, dennoch grafik nicht ganz oben	bergg	CSS	6	27.10.2010 16:02
php include wird im IE falsch dargestellt	SickofSociety	Serveradministration und serverseitige Scripte	5	26.09.2007 01:06
link funktioniert nicht im IE	ThomThom	(X)HTML	11	06.05.2005 21:50