全高與相對位置

div的我怎麼能全高度分配到一個div相對位置 -全高與相對位置

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>

但我家畫廊DIV沒有采取充分的高度。我如何將高度動態分配給家庭畫廊，因爲我專注於響應式設計。

來源

2016-08-12 Rohan Veer

這是100％的高度，不是嗎？你能展示你想要獲得的結果以及你從上面的代碼中得到的結果。 – Smit

只需添加下面一行到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%; 
}

這裏的jsfiddle：demo

來源

2016-08-12 07:18:41 chirag

感謝您的幫助。我試過你的代碼，但不知何故它不適合我。你能幫我解決嗎？鏈接是 - http://www.planetradiocity.com/home.php。檢查手機。滑塊和內容重疊。 –

當它不工作..？ – chirag

滑塊和內容重疊，因爲你已經爲 – 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>

來源

2016-08-12 07:23:26

全高與相對位置

回答

相關問題