爲什麼innerContainer不能填充外部容器？

Question

我想創建一個書寫區域和一個消息區域，我在窗口的當前高度上獲取我的容器，但是當我嘗試將容器拆分爲兩部分時，內部容器不會填充外部容器。

問題：我如何得到#message元素適合#chatContainer減去#writingBox高度？

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100% - 54px); 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100% - 54px); 
 
    background: lightgreen; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

問題是你不能設置一個高度，如果父容器只有一個最小高度設置就可以了。在min-height

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    min-height: 100%; 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
    box-sizing: border-box; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    background: lightgreen; 
 
    flex-grow: 1; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

變化100%到100vh：

您可以使用Flexbox的達到你想要的東西。

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100vh - 54px); 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    height: auto; 
 
    min-height: calc(100vh - 108px); 
 
    background: lightgreen; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

您可以設置高度爲您#chatContainer是鈣（100％ - 55像素）和高度#messages是鈣（100％ - 55像素）

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    color: #393939; 
 
    font-family: 'Lato', sans-serif; 
 
    -ms-box-sizing: border-box; 
 
    -o-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
#chatContainer { 
 
    cursor: default; 
 
    position: relative; 
 
    height: calc(100% - 55px); 
 
    min-height: calc(100% - 55px); 
 
    padding: 54px 0 0 0; 
 
    background: lightgray; 
 
} 
 

 
#messages { 
 
    cursor: default; 
 
    position: relative; 
 
    height: calc(100% - 55px); 
 
    background: lightgreen; 
 
} 
 

 
#writingBox { 
 
    border-top: 1px solid #393939; 
 
    height: 54px; 
 
    background: lightblue; 
 
}

<div id="chatContainer"> 
 
    <div id="messages"></div> 
 
    <div id="writingBox"> 
 
    <div id="newMessage"> 
 
    </div> 
 
    </div> 
 
</div>