Volle Höhe mit relativer Position

div Wie kann ich die volle Höhe einen div mit relativer Position zuweisen -Volle Höhe mit relativer Position

div { 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
} 
 
.home-gallery { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.rc-contain { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.rc-slider { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="home-gallery"> 
 
    <div class="rc-contain"> 
 
    .... 
 
    </div> 
 
    <div class="rc-slider"> 
 
    .... 
 
    </div> 
 
</div>

aber meine Heimat-Galerie div nimmt nicht voller Höhe. Wie kann ich der Home-Galerie dynamisch die Höhe zuweisen, da ich mich auf Responsive Design konzentriere?

Quelle

2016-08-12 Rohan Veer

Es ist 100% Höhe, nicht wahr? Können Sie das gewünschte Ergebnis anzeigen und welches Ergebnis erhalten Sie aus dem obigen Code? – Smit

fügen Sie einfach folgende Zeile CSS

html, body { 
    height: 100%; 
}

html

<div class="home-gallery"> 
    <div class="rc-contain"> 
     ....contain 
    </div> 
    <div class="rc-slider"> 
     ....slider 
    </div> 
</div>

css

html, body { 
    height: 100%; 
} 
.home-gallery{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border:1px solid; 
} 

.rc-contain{ 
    position:absolute; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
} 

.rc-slider{ 
    position:absolute; 
    top: 0; 
    height: 100%; 
    width: 100%; 
}

hier ist jsfiddle: demo

Quelle

2016-08-12 07:18:41 chirag

Danke für Ihre Hilfe. Ich habe deinen Code ausprobiert, aber irgendwie funktioniert es nicht für mich. Kannst du mir bitte helfen? Der Link ist - http://www.planetradiocity.com/home.php. Überprüfen Sie auf dem Handy. Der Schieberegler und der Inhalt überschneiden sich. –

wenn es nicht funktioniert ..? – chirag

Slider und Inhalt überschneidet sich, weil Sie für beide die gleiche Position definiert haben – chirag

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    border: 1px solid; 
 
    box-sizing: border-box; 
 
} 
 
.home-gallery { 
 
    position: relative; 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 
.rc-contain { 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background-color: rgba(255, 0, 0, .2); 
 
    /* red */ 
 
} 
 
.rc-slider { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background-color: rgba(0, 0, 255, .2); 
 
    /* blue */ 
 
}

<div class="home-gallery"> 
 
    <div class="rc-contain"> 
 
    .... 
 
    </div> 
 
    <div class="rc-slider"> 
 
    .... 
 
    </div> 
 
</div>

Quelle

2016-08-12 07:23:26

Volle Höhe mit relativer Position

Antwort

Verwandte Themen