2013-03-15 25 views
7

Ich baue derzeit eine Website und habe ein kleines Problem, das ich nicht angehen kann, habe ich ein div mit einer Höhe von 100% erstellt, innerhalb der div ist ein Schieber div auch mit einer Höhe von 100%, das Problem ist das erste div zeigt eine höhe von 0px so dass die div, die unter dem slider div angezeigt werden sollte hinter dem slider div, jemand, der mir helfen kann?Div 100% Höhe Anzeige als 0px?

Hier ist mein Code:

.slider-container { 
    width:        100%; 
    min-height:       100%; 
    background-color:     white; 
    float:        left; 
} 

.main-content { 
    width:        100%; 
    height:        1000px; 
    background-color:     pink; 
    float:        left; 
} 

.column { 
    width:        31%; 
    height:        auto; 
    background-color:     orange; 
    float:        left 
} 

/* SLIDER */ 

.caption { 
    width:        500px; 
    background-image:     url("..//img/caption-bg.png"); 
    background-size:     100%; 
    position:       absolute; 
    z-index:       99; 
    overflow:       hidden; 
    margin-top:       7%; 
    margin-left:      5%; 
    -moz-border-radius:     20px; 
    border-radius:      20px; 
} 

.caption-text { 
    max-width:       460px; 
    overflow:       hidden; 
    margin:        20px; 
} 

.wrapper .slider-container #slideshow { 
    position:       relative; 
    width:        100%; 
    float:        left; 
} 

.wrapper .slider-container #slideshow > div { 
    position:       absolute; 
} 

Der Schieber-Container div 100% Höhe haben sollte, so dass der Hauptinhalt div darunter kommt.

Danke für den Fortschritt!

+2

Auf einer bestimmten Ebene erhalten wird, diese Kaskade von 100% s muss einen Vorfahren mit expliziter Höhe haben. –

+0

Wie meinst du das? –

+0

Der Schieberegler sollte dynamisch sein, so dass seine Flüssigkeit –

Antwort

0

Versuchen Sie, eine Höhe geben zu:

html, body { 
    width:100%; 
    position:relative; 
} 
10

Die % Einheit ist immer relativ zu einem gewissen Wert .. obwohl Sie height: 100%; auf Ihrem angegeben haben <body> Sie werden feststellen, es endet alles Sein 0px hoch wie sind die <div>, der Sie 100% Höhe gaben, da diese Werte relativ zu seinem übergeordneten Container sind, der das Stammelement <html> ist, das derzeit keine explizite Höhe festgelegt hat, so dass es standardmäßig auf . Wenn Sie das Root-Element geben height: 100%; Sie das erwartete Verhalten

+0

Ich glaube, ich verstehe was meinst du, in diesem Fall hat der Slider-Container div eine Höhe von 100%, aber es ist nicht klar, 100% von was, aber wenn ich html 100% Höhe gebe nichts ändert? –

+0

Dies hat etwas geändert, aber jetzt gibt es eine große Lücke zwischen dem Schieberegler und Inhalt div http://www.k2stuc.nl/test/ –

+0

Loswerden von 'min-Höhe: 100%;' auf Slider-Container – Adrift

0

Versuchen Sie, diese

<style type="text/css"> 
html { 
    height: 100%; 
} 

body { 
    text-align: center; 
    height: 100%; 
} 

     </style>