Div 100% wysokość wyświetlana jako 0 pikseli?

Aktualnie buduję stronę internetową i mam mały problem, który wydaje mi się nie rozwiązywać, stworzyłem div o wysokości 100%, wewnątrz tego div jest div suwaka również o wysokości 100%, problem czy pierwszy element div wyświetla wysokość 0 pikseli, tak że element div, który powinien znajdować się poniżej elementu div, wyświetla się za suwakiem suwaka, kto może mi pomóc?Div 100% wysokość wyświetlana jako 0 pikseli?

Oto mój kod:

.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; 
}

Div suwak-pojemnik powinien mieć wysokość 100% tak, że div głównego zawartość pochodzi poniżej.

Dzięki za z góry!

Źródło

2013-03-15 Quincy Norbert

Na pewnym poziomie, to kaskada potrzeb 100% s mieć przodka z wyraźną wysokość. –

Jak masz na myśli? –

Suwak powinien być dynamiczny, tak aby jego płynność –

Spróbuj dając wysokość do:

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

Źródło

2013-03-15 02:14:13

Jednostka % jest zawsze w stosunku do pewnej wartości .. chociaż już określony height: 100%; na swój <body> można zauważyć, że kończy się 0px wysoki jak wszyscy <div>, którą podałeś 100% wysokości, ponieważ te wartości odnoszą się do kontenera nadrzędnego, który kończy się jako element główny <html>, który aktualnie nie ma ustalonej wysokości, więc domyślnie jest to auto. Jeśli dasz element główny height: 100%; dostaniesz oczekiwane zachowanie

Źródło

2013-03-15 02:14:58 Adrift

Myślę, że rozumiem co masz na myśli, w tym przypadku div suwaka-pojemnika ma wysokość 100%, ale nie jest jasne 100% czego, ale kiedy podaję html 100% wysokości nic się nie zmienia? –

To coś zmieniło, ale teraz istnieje duża luka między suwakiem a div treści. Http://www.k2stuc.nl/test/ –

Pozbądź się 'min-height: 100%;' na slider-container – Adrift

Spróbuj

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

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

     </style>

Źródło

2015-10-15 06:32:03

Div 100% wysokość wyświetlana jako 0 pikseli?

Odpowiedz

Powiązane problemy