|
|||
Height 100% wird falsch dargestellt
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> |
Sponsored Links |
|
|||
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... |
Sponsored Links |
|
|||
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> |
|
||||
Zitat:
Code:
* html #selector { /* IE Mac rausfiltern: \*/ Eigenschaft: Wert; /* Hier erst schließt IE Mac den Kommentar. */ } Thomas
__________________
toscho.de |
|
|||
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> |
|
|||
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. |
Sponsored Links |
|
|||
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] |
Sponsored Links |
|
|
Ä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 |