使绝对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％

回答

相关问题