|
|||
Verständnisproblem - Vererbung von height
Hallo Community,
ich bin am Ende meiner Weißheiten. Habe schon in Google gestöbert und mich durch meine CSS-Bücher gelesen. Trotzdem verstehe ich folgenden Sachverhalt nicht: Ich will ein Layout auf eine Höhe von 100% bringen. Der Bildschirm soll immer ausgefüllt sein - sprich min-height: 100%. Unterteilt habe ich in erster Ebene in zwei Teile: head (23%) und darunter mainArea (77%). Soweit so gut. Gehe ich mit Firebug über mainArea, so wird mit der untere Teil meiner Seite in blau hinterlegt. Passt. Vollbild: http://www.bilder-upload.eu/upload/d...1372248022.jpg Nun will ich das selbe Spiel eine ebene weiter unten machen mit dem Unterschied, dass ich nun immer die kompletten 77% von mainArea als Höhe haben will (z.B. für eine Hintergrundfarbe in einem dort angeseten Bereich). Deshalb habe ich meiner Klasse ym-wrapper eine Höhe (min-height) von 100% zugewiesen, da sich die Angabe ja auf das Eltern Element, also mainArea, bezieht. Da keine der von mir verwendeten CSS-Deklarationen eine Definition für position enthält sind alle static. Die 100% Höhe, von ym-wrapper muss meiner Ansicht nach den kompletten Bereich von mainArea ausfüllen. Tut es aber nicht. Vollbild: http://www.bilder-upload.eu/upload/7...1372248059.jpg Hier ist lediglich der tatsächlich gefüllte Bereich blau hinterlegt. Genau dieses Phänomen verstehe ich nicht so recht DENN --> gebe ich hier eine fixe Höhe an, so wird diese auch reserviert, bzw. der blaue Bereich von Firebug wird größer. Gibt es da irgendwelche Besonderheiten, die erst ab einer bestimmten Anzahl an Vererbungen greifen oder habe ich da irgendetwas völlig falsch verstanden? Live zu sehen unter: http://p180914.mittwaldserver.info/f..._division.html bzw. hier der vereinfachte Code der Layout-HTML-Datei: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"/> <link href="css/layout.css" rel="stylesheet" type="text/css"/> </head> <body> <header> <div class="headArea"> </div> <!-- head_area --> </header> <div class="mainArea"> <div class="ym-wrapper"> <div class="ym-col1"> </div> <!-- ym-col1 --> <div class="ym-col3"> <div class="content"> <!-- Inhaltsbereich rechte Seite --> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur </div> <!-- content --> </div> <!-- ym-col3 --> </div> <!-- ym-wrapper --> </div> <!-- mainArea --> </body> </html> und hier der Code der zugehörigen CSS-Datei: Code:
@media { html { height: 100%; } body { overflow-y: scroll; height: 100%; margin: 0; padding: 0; } .ym-wrapper { width: 1024px; margin: 0 auto; } .headArea{ /*height:216px;*/ } .ym-col1 { /* Sidebar */ float: left; width: 200px; background: green; } .ym-col3 { /* Content Bereich*/ margin: 0px 15px 0px 200px; border-left: 6px lightgrey solid; background: #ffffff; } .content{ padding: 46px 146px 20px 20px; } header { background: #009b9f url("xxx.jpg") no-repeat right top; z-index:100; height:23%; min-height: 216px; } .mainArea { background-color: lightgrey; min-height: 77%; } .mainArea .ym-wrapper{ min-height: 100%; background:yellow; } } Geändert von breppe (27.06.2013 um 11:00 Uhr) |
Sponsored Links |
|
|||
min-height funktioniert nur, wenn das Elternelement height besitzt (nicht min-height). Sonst läge eine zirkuläre Abhängigkeit vor, die in CSS nicht aufgelöst werden kann.
P.S. Bitte verlinke die großen Bilder, anstatt sie einzubinden.
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Du verwendest min-height statt height.
HTML-Code:
body { overflow-y: scroll; height: 100%; margin: 0; padding: 0; } HTML-Code:
.ym-wrapper { width: 1024px; margin: 0 auto; } HTML-Code:
.ym-col3 { /* Content Bereich*/ margin: 0px 15px 0px 200px; border-left: 6px lightgrey solid; background: #ffffff; HTML-Code:
header { background: #009b9f url("../../themes/garagenbau/xxx.jpg") no-repeat right top; z-index:100; height:23%; min-height: 216px; } z-index:100; hat keine Auswirkung, da Element statisch ist. HTML-Code:
.mainArea .ym-wrapper{ min-height: 100%; background:yellow; }
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Hallo,
overflow-y: scroll; dient wohl dem Zweck, daß der zentrierte Inhaltsbereich nicht "springt", wenn von einer Seite mit viel Inhalt(-->vertik. Scrollbalken) auf eine Seite mit wenig Inhalt(-->keine Scrollbalken) gewechselt wird. Grüße gaby |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
Hintergrundbild repeat-y beginnend ab bestimmter höhe | nightmind | CSS | 16 | 14.07.2012 13:37 |
Div Positionen in Firefox falsch | ozero | CSS | 4 | 17.07.2009 23:35 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 15:07 |
Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 16:22 |