zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verständnisproblem - Vererbung von height

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.06.2013, 15:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2009
Beiträge: 5
breppe befindet sich auf einem aufstrebenden Ast
Frage 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 -->
                      &nbsp;               
                      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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.06.2013, 16:35
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.06.2013, 16:47
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Du verwendest min-height statt height.

HTML-Code:
body {
    overflow-y: scroll;  
    height: 100%;
    margin: 0;
    padding: 0;
  }
overflow-y: scroll; kann raus.

HTML-Code:
.ym-wrapper {
    width: 1024px;
    margin: 0 auto;
  }
Das taucht unten noch mal auf, Fehlerquelle möglich!

HTML-Code:
.ym-col3 {
  /* Content Bereich*/
    margin: 0px 15px 0px 200px;
    border-left: 6px lightgrey solid;
    background: #ffffff;
Hier muss bei ym-col3 die Eigenschaft height: 100%; hinzugefügt werden.

HTML-Code:
header {
    background: #009b9f url("../../themes/garagenbau/xxx.jpg") no-repeat right top;
    z-index:100;
    height:23%;
    min-height: 216px;
  }
min-height: 216px; muss raus, verschiebt sonst alles nach unten, wenn Viewport zu klein wird.
z-index:100; hat keine Auswirkung, da Element statisch ist.

HTML-Code:
.mainArea .ym-wrapper{
    min-height: 100%;
    background:yellow;
   }
min-height: 100%; muss auf height: 100%; geändert werden.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.06.2013, 17:22
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
overflow-y: scroll; kann raus.
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
Mit Zitat antworten
  #5 (permalink)  
Alt 27.06.2013, 11:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2009
Beiträge: 5
breppe befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

vielen vielen Dank für eure Tipps! Hat mir wirklich sehr weiter geholfen.

Viele Gruße
Breppe
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:14 Uhr.