使絕對div高度100％

我有一個父位置與相對位置和2個子div（左和右）與絕對定位。使絕對div高度100％

左div應該是height: 100%和右div內容動態變化。現在當我滾動左側的孩子仍然較小（不是100％），並且右側div有它的身高。

在父div上方有水平導航欄。我嘗試了bottom: 0,position: fixed，但結果不好。

.left-sidebar { 
    font-weight: 400; 
    background-color: #B3E5FC; 
    display:inline-block; 
    width: 29%; 
    left: 0; 
    z-index: 2; 
    box-shadow: 5px 10px 10px 0px grey; 
    height: 92vh; 
    position: absolute; 
} 

.right-content{ 
    display: inline-block; 
    // height: 100%; 
    position: absolute; 
    left:0; 
    right: 0; 
    padding: 1em; 
    min-width: 66%; 
} 

.main-parent { 
    position: relative; 
}

來源

2016-05-28 Amit Kumar Kannaujiya

取而代之的截圖，你可以提供我們與您的代碼（部分如果你願意的話）？ HTML/CSS。 – Tico

您可以使用'vh'和'vw' css單位。「100vh」將是屏幕的總高度。 –

嘗試100vh也沒有工作。 –

你不需要position:absolute，但你需要給height:100%到body/html和.main-parent

* { 
 
    box-sizing: border-box 
 
} 
 
body, 
 
html { 
 
    margin: 0; 
 
    height: 100% 
 
} 
 
.main-parent { 
 
    height:100% 
 
} 
 
.left-sidebar { 
 
    font-weight: 400; 
 
    background-color: #B3E5FC; 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    width: 29%; 
 
    box-shadow: 5px 10px 10px 0px grey; 
 
    height: 100%; 
 
} 
 
.right-content { 
 
    display: inline-block; 
 
    height: 100%; 
 
    padding: 1em; 
 
    min-width: 66%; 
 
    background:red 
 
}

<div class="main-parent"> 
 
    <div class="left-sidebar">asda</div> 
 
    <div class="right-content">dsdf</div> 
 
</div>

來源

2016-05-28 13:35:47 dippas

我必須使用絕對和相對定位，因爲我的設計很複雜，請附上圖片一次。 –

仍然沒有理由使用'position：absolute' – dippas

使絕對div高度100％

回答

相關問題